Angularのifディレクティブ

Angularでは、変数の値に応じてタグを表示したり非表示にしたりすることができます。このために、特別なディレクティブ *ngIf が使われます。その使い方を見てみましょう。

まず、このディレクティブをインポートする必要があります：

app/app.component.tsimport {NgIf} from "@angular/common";

そして、デコレーターのimportsセクションに追加します：

app/app.component.ts@Component({
  .....
  imports: [....., NgIf],
  ....
})

ここで、次のような変数があるとします：

app/app.component.tsexport class AppComponent {
  public isAdmin: boolean = true;
}

この変数の値が true の場合に表示されるdivを作りましょう：

app/app.component.html<div *ngIf="isAdmin">
  text
</div>

次に、変数の値が false の場合にdivが表示されるようにしましょう：

app/app.component.html<div *ngIf="!isAdmin">
  text
</div>