How to set up WOW.js in Angular 2 and 4?

Question

I am trying to get WOW.js to work in my Angular project, but it is not working yet. I do not use webpack, so I think the following thread does not answer my question: How to use WOW.js in Angular 2 Webpack? .

The steps that I have done so far are:

• I installed the wow.js. module

npm install wowjs

2. I added wowjs files to '.angular-cli.json'.

   "styles": ["../ node_modules / wowjs / css / libs / animate.css"],

   "scripts": ["../node_modules/wowjs/dist/wow.js"]

3. Then I added a wow effect to one of my headers.

<h1 class="wow slideInLeft" data-wow-duration="2s">Wow effect!</h1> 

4. And the next thing I did was rebuild and maintain my project.

ng build

ng serve

5. There is no wow effect yet. Does anyone know what I should do?

Answer 1

You will need to initialize WOW for your component.

In the component where you plan to use WOW, import the script

  import { WOW } from 'wowjs/dist/wow.min'; 

then in your class using the Angular ngAfterViewInit method

  class ngAfterViewInit(){ new WOW().init(); }