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

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

AngularにはngIfディレクティブというディレクティブが標準で用意されています。

単なるif文で使い方としてはif文がtrueの場合に表示するといった機能です。

記述方法は以下のような感じで記述します。

dell.component.html

dell.component.ts

flg = true;なのでdivタグは表示されます。

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

Angular4以降はngIf~else文が記述できます。

dell.component.html

flgをfalseにすると、以下のように表示されます。

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

boolean型でない場合の挙動

ngIf='変数'の変数の部分はboolean型であるとは限りません。

falseの挙動になる場合を調べました。

結果
true true
false false
null false
undefined false
[] true
{} true
0 false
1 true
-1 true

ngIfを使用するには、app.module.tsで、以下をimportしておく必要があります。

詳細は「AngularとTypeScriptでSPAを作成する」を参照ください。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA