Angular 8Javascript

How to implement wow js in angular 8?

Angular 8 dynamic routing working example
Views

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.

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

 

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

...
"styles": ["node_modules/animate.css/animate.css"],
"scripts": ["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:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

2 Comments

Leave a Reply

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

Positive SSL