Angularにおける*ngIfとelseの使いかた

Angularのテンプレート構文において、*ngIfディレクティブは、条件に基づいて要素を表示または非表示にするための強力なツールです。elseキーワードは、条件が満たされなかった場合にレンダリングする要素を指定するために使用されます。

基本的な使い方

<div *ngIf="condition; else elseTemplate">
  </div>

<ng-template #elseTemplate>
  </ng-template>

• condition: 評価される条件式です。
• elseTemplate: 条件が満たされなかった場合にレンダリングされるテンプレート参照です。

例

<div *ngIf="isLoggedIn; else loginTemplate">
  </div>

<ng-template #loginTemplate>
  <button>ログイン</button>
</ng-template>

この例では、isLoggedInがtrueの場合、ログインしているユーザーに表示されるコンテンツがレンダリングされます。isLoggedInがfalseの場合、ログインボタンが表示されます。

複数の条件の処理

複数の条件を処理するには、ネストされた*ngIfを使用できます。

<div *ngIf="condition1; else condition2Template">
  </div>

<ng-template #condition2Template>
  <div *ngIf="condition2; else condition3Template">
    </div>
  <ng-template #condition3Template>
    </ng-template>
</div>

基本的な例

<div *ngIf="isLoggedIn; else loginTemplate">
  <p>ログインしています。</p>
</div>

<ng-template #loginTemplate>
  <button>ログイン</button>
</ng-template>

• isLoggedIn: ログイン状態を表す変数です。
• loginTemplate: ログインしていない場合に表示されるテンプレートです。

<div *ngIf="user.isAdmin; else nonAdminTemplate">
  <p>管理者権限があります。</p>
</div>

<ng-template #nonAdminTemplate>
  <div *ngIf="user.isMember; else guestTemplate">
    <p>メンバー権限があります。</p>
  </div>
  <ng-template #guestTemplate>
    <p>ゲストです。</p>
  </ng-template>
</div>

• user.isAdmin: ユーザーが管理者かどうかを表すプロパティです。

<div *ngIf="product.quantity > 0; else outOfStockTemplate">
  <button>カートに追加</button>
</div>

<ng-template #outOfStockTemplate>
  <p>在庫切れです。</p>
</ng-template>

• product.quantity: 商品の在庫数を表すプロパティです。

複数の要素の表示・非表示

<div *ngIf="showDetails; else hideDetailsTemplate">
  <p>詳細情報</p>
  <ul>
    <li>...</li>
  </ul>
</div>

<ng-template #hideDetailsTemplate>
  <button>詳細を表示</button>
</ng-template>

*ngSwitch

複数の条件を評価し、それに応じて異なるテンプレートをレンダリングする場合、*ngSwitchを使用できます。

<div [ngSwitch]="expression">
  <template ngSwitchCase="case1">
    </template>
  <template ngSwitchCase="case2">
    </template>
  <template ngSwitchDefault>
    </template>
</div>

パイプ

単純な条件に基づいてコンテンツを表示または非表示にする場合、パイプを使用することもできます。

<p>{{ value | myPipe }}</p>

ここで、myPipeは、valueの値に基づいてコンテンツを返すカスタムパイプです。

テンプレート関数

より複雑な条件処理が必要な場合は、テンプレート関数を使用することができます。

<div *ngIf="myFunction(value)">
  </div>

ここで、myFunctionは、valueの値に基づいてtrueまたはfalseを返す関数です。

属性バインディング

単純な条件に基づいて属性の値を変更する場合、属性バインディングを使用できます。

<button [disabled]="isDisabled">ボタン</button>

ここで、isDisabledは、ボタンを無効にするかどうかを表す変数です。

クラスバインディング

条件に基づいて要素のクラスを追加または削除する場合、クラスバインディングを使用できます。

<div [class.hidden]="isHidden">
  </div>