コンポーネントの制御フロー - @if

ユーザーの画面に表示するものを決定することは、アプリケーション開発における一般的なタスクです。多くの場合、決定は条件を使用してプログラム的に行われます。

テンプレートで条件付き表示を表現するために、Angularは@ifテンプレート構文を使用します。

このアクティビティでは、テンプレートで条件式を使用する方法を学びます。

テンプレートで要素の条件付き表示を可能にする構文は@ifです。

コンポーネントで@if構文を使用する方法の例を以下に示します。

      
@Component({  ...  template: `    @if (isLoggedIn) {      <p>Welcome back, Friend!</p>    }  `,})class AppComponent {  isLoggedIn = true;}
    

2つの注意すべき点があります。

• ifに@プレフィックスが付いているのは、Angularテンプレート構文と呼ばれる特殊なタイプの構文だからです。
• v16以前のアプリケーションを使用している場合は、詳細についてはAngularドキュメントのNgIfを参照してください。

1. isServerRunningというプロパティを作成する

   AppComponentクラスに、isServerRunningというboolean型のプロパティを追加し、初期値をtrueに設定します。

2. テンプレートで@ifを使用する

   isServerRunningの値がtrueの場合、Yes, the server is runningというメッセージを表示するようにテンプレートを更新します。

3. テンプレートで@elseを使用する

   Angularは現在、@else構文を使用してelseケースを定義するためのネイティブテンプレート構文をサポートしています。elseケースとしてNo, the server is not runningというメッセージを表示するようにテンプレートを更新します。

   例を以下に示します。

         
   template: `  @if (isServerRunning) { ... }  @else { ... }`;
       

   不足しているマークアップを埋めるためにコードを追加します。

このタイプの機能は条件付き制御フローと呼ばれます。次に、テンプレートで項目を繰り返す方法を学びます。