← Angular コース
6. @if — 条件で表示を切り替える
テンプレート内で条件分岐をするには @if を使います。@if (条件) { ... } と書くと、条件が true のときだけ中身が描画されます。@else { ... } や @else if (条件) { ... } を続けて、条件ごとの出し分けもできます。
実務では「ログイン済みならメニューを出す」「読み込み中ならスピナーを出す」など、状態によって画面の一部を出したり消したりする場面で常に使います。条件が false のときは要素がDOMから完全に取り除かれるため、見えないだけでなく存在しなくなる、というのがポイントです。
v17より前は *ngIf というディレクティブを使っていました。古いコードや記事ではそちらを見かけますが、新規開発では @if を使うのが現在の推奨です。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import { Component } from '@angular/core';
@Component({
selector: 'app-login-message',
// 条件が true なら @if 側、false なら @else 側が描画される
template:
'@if (isLoggedIn) {' +
' <p>ようこそ!</p>' +
'} @else {' +
' <p>ログインしてください</p>' +
'}',
})
export class LoginMessageComponent {
isLoggedIn = true;
}