Home Angular 16 How to implement wow js in angular 8?

How to implement wow js in angular 8?

by therichpost
Published: Last Updated on 13 comments

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to implement wow js in angular 8?

This is very interesting topic and wow js is very interesting and very popular nowadays.

Guys here is the link with posts for Angular 16+ : Angular 16 + Tutorial Posts

Here is the the implementation steps and please follow carefully:


1. Here are the basics commands to install angular 8 on your system:

npm install -g @angular/cli 

ng new angularwow //Create new Angular Project

cd angularwow // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. After done with above, you need to run below commands to set wow js environment into your angular 8 application:

npm install --save wowjs

npm install --save ngx-wow

npm install jquery --save

 npm install bootstrap --save

3. Now you need to add below code into your angular.json file:

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

4. Now you need to add below code into your src/app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NgwWowModule } from 'ngx-wow';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NgwWowModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Now you need to add below code into your src/app/app.component.ts file:

import { Component } from '@angular/core';
import { NgwWowService } from 'ngx-wow';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private wowService: NgwWowService) {
    this.wowService.init();
  }
}

5. Now you need to add below code into src/app/app.component.html file:

<div class="jumbotron text-center">
  <h1>WOWJS</h1>
  <p>Angular 8</p> 
</div>
<div class="container">
  <div class="row text-center" style="display: block;">
       <img class="wow fadeInDown" data-wow-delay="0.5s" src="https://wowjs.uk/img/wow-logo.jpg">		
  </div>
</div>

6. Please below command into your terminal to taste the output:

ng serve

This is it and if you have any query then please do comment below.

Jassa

Thank you

You may also like

13 comments

Jasmeen December 2, 2019 - 4:25 am

Thank you for post.

Reply
Ajay Malhotra December 3, 2019 - 3:45 pm

Welcome Jasmeen

Reply
Psykher February 5, 2020 - 7:01 pm

Thanks, I was trying to solve it without the ngx-wow module. Do you know how to configure the scrollspy directive for landing pages? It’s not that important at all, but I can’t make it work.

Regards.

Reply
Ajay Malhotra February 7, 2020 - 4:53 pm

Hello and I will share the post link or you can find that on my blog.
Angular 8 scrollspy.

Reply
Vineet Rathor April 10, 2020 - 7:38 pm

Hey man can you help me , I am getting this error –
LoginComponent_Host.ngfactory.js:6 ERROR ReferenceError: WOW is not defined

Reply
Ajay Malhotra April 11, 2020 - 4:23 am

I will check and let you know.
Thanks

Reply
Ag June 5, 2020 - 3:43 pm

i’m using angular 9 and it’s not working with me!!!

Reply
Ajay Malhotra June 5, 2020 - 3:47 pm

I will update it with angular 9. Thanks

Reply
Ghost July 18, 2020 - 11:51 am

Hi, can you update with Angular 9.

Reply
Ajay Malhotra July 18, 2020 - 11:52 am

Post Updated to Angular 9/10, thanks

Reply
RK November 27, 2021 - 7:24 am

Thanks for the solution, but on IE browser wow is not working

Reply
melwin June 6, 2022 - 7:06 am

i m getting the error wow is not defined

Reply
therichpost June 6, 2022 - 10:39 am

I will update it with angular 14.

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.