Angular のngClass ディレクティブの使い方

Angular のngClass ディレクティブの使い方
1. 関連

Angular のngClass ディレクティブの使い方

Angular ではstyle.～やclass.～というクラスバインディングやスタイルバインディングがありますが、ngClass を使うことで同様のことが可能になります。

着脱（スタイルの適用オンオフ）が可能になります。

クラスバインディングやスタイルバインディングについては「Angularのデータバインディングという仕組み」を参照ください。

ngClass ディレクティブは、複数のクラス属性のオンオフを切り替えたい場合はngClass ディレクティブを使用すべきです。

[ngClass]="{'class属性1': true,'class属性2': false}"

というように記述します。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:
  `
  <table border="1">
    <tr *ngFor="let tmp of List;let i = index"
    (click)="onColor(i)"
    [ngClass]="{'aaa': isColor[i]}"> <!-- ここ -->
      <td>{{tmp.name}}</td>
    </tr>
  </table>
  `,
  styles: [`
  tr.aaa{background-color: blue;}
  `]
})
export class AppComponent {
  isColor: boolean[] = [false];
  List = [{'name':'Takahashi'},{'name':'Maruyama'},{'name':'Okuyama'}];
  onColor(i:number) {
    for(let j = 0; j < this.List.length; j++) {
      this.isColor[j] = false;// 全行をいったんfalseにする
    }
    this.isColor[i] = true;// クリックした行のみtrueにする
  }
}