Breaking News: Grepper is joining You.com. Read the official announcement!

use ngx-wowjs in angular

Fine Flatworm answered on August 23, 2022 Popularity 1/10 Helpfulness 1/10

answer use ngx-wowjs in angular

use ngx-wowjs in angular

Comment

npm install --save wowjs
npm install --save ngx-wow

/* Add in angular.json */
 "styles": [
        "../node_modules/animate.css/animate.css"
      ],
 "scripts": [
        "../node_modules/wowjs/dist/wow.js"
      ],
      

/* Import in app module */ 
import { NgwWowModule } from 'ngx-wow';
 
@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgwWowModule, ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

/* Usage */
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { NgwWowService } from 'ngx-wow';
import { Subscription }   from 'rxjs/Subscription';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
 
  // keep refs to subscription to be abble to unsubscribe later
  // (NOTE: unless you want to be notified when an item is revealed by WOW,
  //  you absolutely don't need this line and related, for the library to work
  // only the call to `this.wowService.init()` at some point is necessary
  private wowSubscription: Subscription;
 
  constructor(private router: Router, private wowService: NgwWowService){
  this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
      // Reload WoW animations when done navigating to page,
      // but you are free to call it whenever/wherever you like
      this.wowService.init();
    });
  
  }
 
  ngOnInit() {
    // you can subscribe to WOW observable to react when an element is revealed
    this.wowSubscription = this.wowService.itemRevealed$.subscribe(
      (item:HTMLElement) => {
        // do whatever you want with revealed element
      });
  }
 
  ngOnDestroy() {
    // unsubscribe (if necessary) to WOW observable to prevent memory leaks
    this.wowSubscription.unsubscribe();
  }
}



/* In app.component.html 
	Need to have class .animated to make it works
*/
<section class="wow fadeIn animated" data-wow-duration="2s" data-wow-delay="0.5s"></section>

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: angular javascript

Link to this answer
Share Copy Link

Contributed on Aug 23 2022

Fine Flatworm

0 Answers Avg Quality 2/10

use ngx-wowjs in angular

Contents

More Related Answers

use ngx-wowjs in angular

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.