ngx-wow library not working with Angular14

Question

I'm trying to integrate a bootstrap template with angular project, this template uses wow.js library, so I tried to install this library as bellow:

1- install wow.js using npm

npm I wowjs

2- install nxg-wow

npm i ngx-wow

And in app.module.ts I added the NgwWowModule in imports:

import { NgwWowModule } from 'ngx-wow';
imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NgxPaginationModule,
    **NgwWowModule**,
    MaterialModule,
    FormsModule,
  ],

Then I added the reference in angular.json file under scripts[]:

"scripts": [
              "./node_modules/wowjs/dist/wow.min.js",
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js"
            ]

Also in styles.css I added the animate.cs:

@import "~animate.css/animate.css";

Inside the component.ts I did the bellow:

import { Component, OnInit } from '@angular/core';
import { NgwWowService } from 'ngx-wow';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private wowService: NgwWowService) {
    this.wowService.init();
  }
}

And then, I tired to use the wow's classes in HTML as bellow:

 <div class="col-xl-5 col-lg-6 col-md-8 mx-auto">
                        <div class="section-title text-center mb-55">
                            <span class="wow fadeInDown" data-wow-delay=".2s">Our Core</span>
                            <h2 class="mb-15 wow fadeInUp" data-wow-delay=".4s">Features</h2>
                            <p class="wow fadeInUp" data-wow-delay=".6s">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
                        </div>
                    </div>

But the animation not applied to the elements, so any advice please?

ngx-wow library not working with Angular14

0 Answers0