How to setup WOW.js in Angular 2 and 4?

Question

I am trying to get WOW.js working in my Angular project but it is not working yet. I am not using webpack so I think the next thread is not answering my question: How to use WOW.js in Angular 2 Webpack?.

The steps that I took until now:

1. I installed the wow.js module.

npm install wowjs

2. I added the 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 rebuilding and serving my project.

ng build

ng serve

5. There is no wow effect yet. Does somebody know what I have to do yet?

Answer 1

You will need to initialise WOW for your component.

In the component where you plan on using WOW, import the script

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

then in your class with the Angular method ngAfterViewInit

 class ngAfterViewInit(){

   new WOW().init();
 }