app.component.html
<input type="button" value="Start" (click)="onButtonClick()"/> <div [ngClass]="{name:isClicked}">Hello World 4</div>
app.component.css
.name { background-color: aquamarine; }
app.component.ts
import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { isClicked = false; onButtonClick() { this.isClicked = true; } }
Method 2
<div [class.extra-sparkle]="isDelightful">
Binds the presence of the CSS class extra-sparkle
on the element to the truthiness of the expression isDelightful
.
References
https://github.com/mhdr/AngularSamples/tree/master/010/my-app