====== Directive ngClass ====== Assume we have a component called ''servers''. ngClass directive can dynamically change the CSS class of an element. Different from ngStyle, we need a to use the component CSS file this time to set the style. {{ :ng:ngclass.png?nolink&400 |}} ===== servers.component.html===== ngClass take an array of 'css_class_name' : boolean expression pair. If the expression is true, it will dynamically add the css_class_name in to the related HTML element.

The button is clicked

===== servers.component.ts===== import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-servers', templateUrl: './servers.component.html', styleUrls: ['./servers.component.css'] }) export class ServersComponent implements OnInit { bIsBackgroundRed: boolean; constructor() { } ngOnInit() { this.bIsBackgroundRed = false; } onButtonClicked() { this.bIsBackgroundRed = true; } } ===== servers.component.css ===== .redBackground{ background: indianred; } .greenBackground{ background:greenyellow; }