Nunchaku Pizza Master

    angular2-set-class-in-view

    1.0.1 • Public • Published

    angular2-set-class-in-view

    angular2-set-class-in-view is a plugin directive for Angular 2.

    Setup


    To use the Angular set class in view, simply run npm install angular2-set-class-in-view and then include SetClassInView in your project (see Example for more details).

    Config / Example


    Angular2 set class in view sets is able to set class on every element which appears in viewport of mobile or desktop browser.

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
     
    import { AppComponent }   from './app.component';
    import { SetClassInView } from 'angular2-set-class-in-view/main';
     
    @NgModule({
      imports: [ BrowserModule ],
      declarations: [
          AppComponent,
          SetClassInView
      ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }
     
    <div [setClassInView]="'show'">
        <h3>This element is in view</h3>
        <img src="images/image.jpg" alt="image">
    </div>

    Config / Example


    When you are using SystemJs you need to load angular2-set-class-in-view dependency

    'angular2-set-class-in-view': {
            main: './main.js',
            defaultExtension: 'js'
          }

    and map 'angular2-set-class-in-view to 'node_modules/angular2-set-class-in-view'.

    Your systemjs.config.js could look like:

    (function (global) {
      System.config({
        paths: {
          // paths serve as alias
          'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
          // our app is within the app folder
          app: 'app',
          '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
          'rxjs':                       'npm:rxjs',
          'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
          'angular2-set-class-in-view': 'npm:angular2-set-class-in-view'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          },
          'angular2-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
          },
          'angular2-set-class-in-view': {
            main: './main.js',
            defaultExtension: 'js'
          }
        }
      });
    })(this);

    Install

    npm i angular2-set-class-in-view

    DownloadsWeekly Downloads

    4

    Version

    1.0.1

    License

    ISC

    Last publish

    Collaborators

    • robert-dev