ngx-wow - Angular module for WOW.js.
Demo
View all the directives in action at https://tinesoft.github.io/ngx-wow
Dependencies
- Angular (requires Angular 6+(tested with
v6.1.9
), v1.0.2 is the latest version for Angular < 6 ) - WOW JS (requires WOW JS 1.1 or higher, tested with 1.1.3)
Installation
Install above dependencies via npm. In particular for WOW JS
, run:
npm install --save wowjs
Angular-CLI
Note: If you are using
angular-cli
to build your app, make sure thatwowjs
is properly listed as a global library, by editing yourangular-cli.json
as such:
"scripts": [ "../node_modules/wowjs/dist/wow.js" ],
Also make sure that [Animate.css](which is already installed and used internally by wowjs
to actually animate items) is listed as global style, by either:
- editing
angular-cli.json
as such:
"styles": [ Â Â Â Â "../node_modules/animate.css/animate.css" ],
- or by importing in your main
styles.scss
(orstyles.sass
,styles.less
,styles.styl
) file as such:
... @import "~animate.css/animate.css"; ...
SystemJS
Note:If you are using
SystemJS
, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,map
needs to tell the System loader where to look forngx-wow
:
map: { 'ngx-wow': 'node_modules/ngx-wow/bundles/ngx-wow.min.js', }
In your systemjs config file, meta
needs to tell the System loader how to load wowjs
:
meta: { './node_modules/wowjs/dist/wow.min.js': { format: 'amd' } }
In your index.html file, add script tag to load wowjs
globally:
<!-- 1. Configure SystemJS --> <script src="system.config.js"></script> <!-- 2. Add WOW dependency--> <script src="node_modules/wowjs/dist/wow.min.js"></script>
And add a reference to the Animate.css
in the head section:
<head> <link rel="stylesheet" type="text/css" href="node_modules/animate.css/animate.min.css"> </head>
Now install ngx-wow
via:
npm install --save ngx-wow
Once installed you need to import the main module:
import { NgwWowModule } from 'ngx-wow';
import { NgwWowModule } from 'ngx-wow'; @NgModule({ declarations: [AppComponent, ...], imports: [NgwWowModule, ...], bootstrap: [AppComponent] }) export class AppModule { }
Usage
Once the module is imported, you can use the NgwWowService
in your component (i.e. AppComponent
) to trigger reveal animation by calling init()
or to be notified by WOW when an element is revealed.
Here is how it works:
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.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(); } }
See WOW.js Documentation to see more about how to customize animation settings.
Credits
ngx-wow
is built upon WOW.js, created by Matthieu Aussaguel
License
Copyright (c) 2018 Tine Kondo. Licensed under the MIT License (MIT)