【Angular】値によってCSSを切り替える

書き方は二通り。

①ngClassを使う
②クラスバインディングを使う

<!-- ngClass -->
<p [ngClass]="{ 'font-on': fontFlag }">ngClass</p>
<!-- クラスバインディング -->
<p [class.font-on]="fontFlag">css works!</p>

<button (click)="changeClass()">色を変える</button>

p {
  color: black;
}
.font-on {
  color: red;
}

export class CssComponent implements OnInit {
  fontFlag = false;
  constructor() {}

  ngOnInit() {}

  changeClass() {
    this.fontFlag = !this.fontFlag;
  }
}

ボタンを押すと色が変わります

単純に2種類を切り替えたいだけならクラスバインディング、
複数種類使い分けたいときはngClassが便利そう