ngIf、ngClass、ngStyleディレクティブを使いこなす

Angular 2で条件付き属性を追加する方法

ngIf ディレクティブを使う

ngIf ディレクティブは、条件に基づいて要素を表示または非表示するのに役立ちます。条件が真の場合、要素はテンプレートにレンダリングされます。条件が偽の場合、要素はテンプレートから削除されます。

<div *ngIf="condition">
  ... 要素 ...
</div>

上記の例では、condition 変数の値が真の場合のみ、div 要素がレンダリングされます。

ngClass ディレクティブは、条件に基づいて要素にクラスを追加または削除するのに役立ちます。

<div [ngClass]="{'active': condition}">
  ... 要素 ...
</div>

上記の例では、condition 変数の値が真の場合、active クラスが div 要素に追加されます。

ngStyle ディレクティブは、条件に基づいて要素のスタイルを設定するのに役立ちます。

<div [ngStyle]="{'color': condition ? 'red' : 'blue'}">
  ... 要素 ...
</div>

上記の例では、condition 変数の値が真の場合、div 要素の色は赤になります。条件が偽の場合、div 要素の色は青になります。

テンプレート構文を使う

条件付き属性を追加するには、テンプレート構文を使用することもできます。

<div [attr.disabled]="condition">
  ... 要素 ...
</div>

上記の例では、condition 変数の値が真の場合、div 要素の disabled 属性が設定されます。

カスタムディレクティブを使う

上記の方法でニーズが満たされない場合は、カスタムディレクティブを作成することができます。

<div *ngIf="condition">
  要素は条件が真の場合のみ表示されます。
</div>

<button [ngClass]="{'active': condition}">
  ボタンは条件が真の場合のみアクティブになります。
</button>

<h1 [ngStyle]="{'color': condition ? 'red' : 'blue'}">
  見出しの色は条件によって変わります。
</h1>

<div [attr.disabled]="condition ? 'disabled' : null">
  ... 要素 ...
</div>

上記の例では、condition 変数の値が真の場合、div 要素に disabled 属性が設定されます。条件が偽の場合、disabled 属性は設定されません。

ngModel ディレクティブは、フォームコントロールとテンプレート要素間の双方向データバインディングを提供します。

<input type="checkbox" [(ngModel)]="condition">

<div [attr.disabled]="condition">
  ... 要素 ...
</div>

パイプを使う

パイプは、テンプレート内でデータをフォーマットしたり、変換したりするのに役立ちます。

<div [attr.class]="condition | classPipe">
  ... 要素 ...
</div>