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 : {
' npm: ' : ' node_modules/ '
} ,
map : {
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 : {
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 ) ;