NgIfは、渡された式がtrueかfalseかに応じて、DOMの一部を追加または削除する組み込みのテンプレートディレクティブです。

<div *ngIf="userHasPet">
  {{ user.pet.name }}
</div>

上記で、 userHasPet がtrueの場合、divはDOMに含まれ(ページに表示されます)、 userHasPet がfalseの場合、divは削除されます。 DOMから(ページには表示されません)。

* ngFor と同様に、 * 文字を使用すると、テンプレートを作成でき、次の構文へのショートカットを使用できます: template =“ ngIf userHasPet”

より複雑な式を*ngIfに渡すこともできます。

<div *ngIf="user.name.length > 6 && user.name.length < 10">
  Long name {{ user.name }}, but not too long!
</div>

関連項目