Applying CSS Classes Dynamically with ngClass on Angular

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