Nocturnal Pajama Mutants

    ngx-wow
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    ngx-wow - Angular module for WOW.js.

    npm version Build Status Coverage Status dependency Status devDependency Status Greenkeeper Badge

    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 that wowjs is properly listed as a global library, by editing your angular-cli.json as such:

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

    Also make sure that Animate.css 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 (or styles.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 for ngx-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)

    Install

    npm i ngx-wow

    DownloadsWeekly Downloads

    798

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    44.9 kB

    Total Files

    21

    Last publish

    Collaborators

    • tinesoft