ngClass

ngClassはclass属性を制御するためのディレクティブです。

以下のように指定することで「class=”myClass1″」が指定されているのと同じ状態にすることができます。

<div ngClass="myClass1">target</div>

class属性と並行して利用することで両方のclassが指定された状態、下記のサンプルでは「class=”myClass1 myClass2″」と指定されたのと同じ状態にすることができます。

<div class="myClass1" ngClass="myClass2">target</div>

ブラケット[ ]で包んで利用することでコンポーネント内のプロパティをclass名として利用することができます。下記のサンプルで「class=”myClass1 myClass2″」と指定されたのと同じ状態ということになります。

@Component({
  selector: 'app',
  template: `
    <div class="myClass1" [ngClass]="MYCLASS2">target</div>
  `
})
export class App {
  MYCLASS2 = "myClass2"
}

配列を指定することで複数のclass属性を同時に付与することができます。下記のサンプルで「class=”myClass1 myClass2 myClass3″」と指定されたのと同じ状態ということになります。

<div class="myClass1" [ngClass]="['myClass2', 'myClass3']">target</div>

オブジェクトを指定する場合はプロパティ名にclass名を、プロパティ値に真偽値で指定したclass属性を付与するかどうかを指定できます。下記のサンプルで「class=”myClass1 myClass3″」と指定されたのと同じ状態ということになります。

<div class="myClass1" [ngClass]="{'myClass2':false, 'myClass3':true}">target</div>

オブジェクトのclass名には半角スペースで複数のclassを指定できます。下記のサンプルで「class=”myClass1 myClass4 myClass5″」と指定されたのと同じ状態ということになります。

<div class="myClass1" [ngClass]="{'myClass2 myClass3':false, 'myClass4 myClass5':true}">target</div>

登録日 : 2017年05月05日最終更新日 : 2017年5月5日

Angularリファレンス

ngClass

同じカテゴリー(@angular/common)のエントリー

検索

スポンサードリンク

バージョン

リファレンス