Angularで要素の表示・非表示を自由自在に操る！〜 *ngIf、[hidden]、そしてその他のテクニックを使いこなそう〜

2024-04-18

Angularにおける*ngIfと[hidden]の違い

*ngIf

構造ディレクティブであり、真の式の場合にのみ要素を生成・挿入します。
偽の場合、要素は生成されず、DOMにも存在しません。
要素の生成・破棄を伴うため、頻繁な切り替えには適していません。
初回レンダリングのみで判定されるため、動的な条件で表示・非表示を切り替えるのには適しています。

例:

<div *ngIf="show">
  コンテンツ
</div>

[hidden]

偽の場合、要素は非表示になりますが、DOMには残ります。
表示・非表示の切り替えが頻繁に行われる場合に適しています。
要素の生成・破棄を伴わないため、パフォーマンスに優れています。
CSSのdisplayプロパティを変更するため、他のCSSルールと干渉する可能性があります。

<div [hidden]="!show">
  コンテンツ
</div>

使い分け

表示・非表示の切り替え頻度が低い場合は*ngIf
初回レンダリングのみで判定される場合は*ngIf
動的な条件で表示・非表示を切り替える場合は*ngIf
パフォーマンスが重要の場合は[hidden]

補足

ngIfは要素を生成・破棄するため、コンポーネントの初期化処理や破棄処理が実行されます。
[hidden]は要素を非表示にするだけであり、コンポーネントのライフサイクルには影響しません。
最新のAngularでは、パフォーマンス向上のためngIfよりも[hidden]の使用が推奨されています。

シナリオ:

商品リストページにおいて、在庫切れの商品のみを非表示にする

HTML

<div class="product-list">
  <div *ngFor="let product of products" class="product">
    <div class="name">{{ product.name }}</div>
    <div class="price">{{ product.price }}</div>
    <div *ngIf="product.stock === 0" class="out-of-stock">在庫切れ</div>
    <div [hidden]="product.stock > 0" class="in-stock">在庫あり</div>
  </div>
</div>

TypeScript

export class ProductListComponent {
  products = [
    { name: '商品A', price: 1000, stock: 5 },
    { name: '商品B', price: 2000, stock: 0 },
    { name: '商品C', price: 3000, stock: 10 },
  ];
}

CSS

.product-list {
  display: flex;
  flex-wrap: wrap;
}

.product {
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

.name {
  font-weight: bold;
}

.price {
  color: #999;
}

.out-of-stock {
  color: red;
}

.in-stock {
  color: green;
}

説明

*ngForを使って、products配列内の各商品に対してproductという変数に代入し、productテンプレートを繰り返しレンダリングします。
product.nameとproduct.priceは、商品の名前と価格を表示します。
*ngIfを使って、product.stockが0の場合のみ在庫切れというメッセージを表示します。
CSSを使って、各要素のスタイルを設定しています。

ポイント

この例では、*ngIfと[hidden]を組み合わせて使用することで、在庫切れの商品のみを非表示にしています。
*ngIfと[hidden]はそれぞれ異なる挙動を持つため、状況に応じて適切なものを選択することが重要です。

このサンプルコードを参考に、*ngIfと[hidden]を使いこなして、より効率的でパフォーマンスの高いAngularアプリケーションを開発してください。

Angularで要素の表示・非表示を切り替えるその他の方法

ngSwitch

複数の条件に基づいて要素を切り替える場合に適しています。
caseラベルを使って、それぞれの条件に対応する要素を定義します。
*ngSwitchCaseディレクティブを使って、どの条件に一致したかを判断します。

<div [ngSwitch]="condition">
  <div *ngSwitchCase="'A'">コンテンツA</div>
  <div *ngSwitchCase="'B'">コンテンツB</div>
  <div *ngSwitchDefault>デフォルトコンテンツ</div>
</div>

ngClass

条件に応じて要素にCSSクラスを付与することで、表示・非表示を切り替える方法です。
ngClassディレクティブを使って、条件に基づいて追加・削除するCSSクラスを指定します。
CSSのdisplayプロパティをnoneに設定することで、要素を非表示にします。

<div [ngClass]="{'hidden': show}">コンテンツ</div>

スタイルバインディング

条件に応じて要素のスタイルを直接変更する方法です。

<div [style.display]="show ? 'block' : 'none'">コンテンツ</div>

TemplateRef

TemplateRefを使って、表示・非表示を切り替えるテンプレートを定義します。
ngTemplateOutletディレクティブを使って、条件に応じてテンプレートを挿入・削除します。

<ng-container *ngIf="show">
  <ng-template #contentTemplate>コンテンツ</ng-template>
  <ng-template ngTemplateOutlet="contentTemplate"></ng-template>
</ng-container>

それぞれの方法の利点と欠点

方法	利点	欠点
`*ngIf`	シンプルでわかりやすい	要素の生成・破棄を伴うため、頻繁な切り替えには適していない
`[hidden]`	パフォーマンスが良い	CSSの`display`プロパティを変更するため、他のCSSルールと干渉する可能性がある
`ngSwitch`	複数の条件に基づいて要素を切り替えられる	記述量が多くなる
`ngClass`	柔軟性が高い	CSSの知識が必要
スタイルバインディング	シンプルでわかりやすい	複雑なロジックには向いていない
`TemplateRef`	複雑なロジックに対応できる	記述量が多くなる