Angularにおけるif構文

Angularでは、特別な構文@ifを使用して条件分岐を行うこともできます。 この構文は、条件に基づいてコードブロックを表示または非表示にすることができます。 使い方を見てみましょう。

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

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

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

app/app.component.html@if (isAdmin) {
  <div>
    text
  </div>
}

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

app/app.component.html@if (!isAdmin) {
  <div>
    text
  </div>
}