Angular 2 Ng Class Example

Angular 2 Ng Class allows us to add CSS classes to an HTML element or remove CSS classes from an HTML element.

angular-2-ng-class-example
angular 2 ng class example

 

Example Code Source :

 import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
 selector: 'my-app',
 template: `
 <div>
 <h2>Hello to {{name}}</h2>
 
 <h3 [ngClass]="['bold-text', 'green-color']">Angular 2 Ng Class works with an array of classes</h3>
 <h3 [ngClass]="'large-text blue-color'">Angular 2 Ng Class works with string of classes</h3>
 <h3 [ngClass]="{'large-text': false, 'red-color': true}">Angular 2 Ng Class works with object/map of classes</h3>
 
 </div>
 `,
})
export class App {
 name:string;
 constructor() {
 this.name = 'Angular 2 Ng Class';
 }
 
 
}

@NgModule({
 imports: [ BrowserModule ],
 declarations: [ App ],
 bootstrap: [ App ]
})
export class AppModule {}

 

Angular 2 Ng Class Example demo