Angular Example?

[Steven4294]

Is there an angular example anywhere? Can't seem to get this working in my angular project... Thanks! :)

[Steven4294]

bump 👍

[hewford]

bump 👍

[anystar]

Start by adding the stylesheet in angular.json build section. Don't worry about the JS file, we'll deal with that.
"node_modules/jarallax/dist/jarallax.css"

To get Jarallax working in Angular I found that in my component I had to import Jarallax like so.

import { jarallax } from 'jarallax';

And then in ngInit I have to run

jarallax(document.querySelectorAll('.jarallax'));

And then in the component stylesheet add

.jarallax { width: 100%; height: 300px; }

I cannot get the settings to work and neither data attributes.

[thegreatyamori]

If you get the error: jarallax.esm.js:109 Uncaught ReferenceError: global is not defined at Module../node_modules/jarallax/src/jarallax.esm.js

Adding this line to polyfills.ts should resolve node global error
(window as any).global = window;

[wikimodels]

I cannot get jarallax working in my angular 8 project. It shows back-ground images, no errors displayed. But no parallax effect either. Before angular project I tested jarallax with a common web site. Everything was fine.

[solidsanity]

I cannot get jarallax working in my angular 8 project. It shows back-ground images, no errors displayed. But no parallax effect either. Before angular project I tested jarallax with a common web site. Everything was fine.

Hopefully this helps you all. With a little trial and error I got it working in my Angular 8 project...

1. Install the NPM module for Jarallax

2. Add these files to your angular.json file under scripts
   "node_modules/jarallax/dist/jarallax.min.js", "node_modules/jarallax/dist/jarallax-element.min.js", "node_modules/jarallax/dist/jarallax-video.min.js"

3. In your component add the import
   import { jarallax, jarallaxElement, jarallaxVideo } from 'jarallax';

4. Add the initializers in onInit()
   jarallaxVideo(); jarallax(document.querySelectorAll('.jarallax')); jarallaxElement();

5. Add this to your polyfills.ts file
   (window as any).global = window;

6. Finally, I found that the liteready module used to determine if the dom is ready breaks angular's lifecycle. So if you are using jaralax on subpages, you'll notice the jarallax elements do not work. To fix this, just add the following to your onInit().
   jarallax(document.querySelectorAll('[data-jarallax-element]'));

[bdairy]

• import { jarallax, jarallaxElement, jarallaxVideo } from 'jarallax';

Angular could not find jarallaxVideo or jarallaxElements in 'jarallax'

it is strange,, using angular 15

[fayeBabacar78]

Hi @bdairy, I'm having the same using with the same Angular version. Did you come to a solution?

[degrootsde]

• import { jarallax, jarallaxElement, jarallaxVideo } from 'jarallax';

Angular could not find jarallaxVideo or jarallaxElements in 'jarallax'

it is strange,, using angular 15

In typings.d.ts (node_modules/jarallax), jarallaxVideo is missing. You can add it and it should work.:

/** this is missing in typings.d.ts. */
export function jarallaxVideo(jarallaxInstance?: typeof jarallax): void