Skip to content

angular2 directive which sets a given class to element where attribute [setClassInView]="'className'" is placed.

Notifications You must be signed in to change notification settings

d668/angular2-set-class-in-view

This branch is up to date with robert197/angular2-set-class-in-view:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Robert Pupel
Oct 23, 2016
478330b · Oct 23, 2016

History

6 Commits
Sep 23, 2016
Oct 23, 2016
Sep 23, 2016
Sep 23, 2016
Sep 23, 2016
Sep 23, 2016
Oct 23, 2016
Sep 23, 2016
Sep 23, 2016
Sep 23, 2016
Sep 23, 2016
Sep 23, 2016

Repository files navigation

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);

About

angular2 directive which sets a given class to element where attribute [setClassInView]="'className'" is placed.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%