Angular：*ngIf 条件分岐で表示内容を変更する方法を3分でわかりやすく

*ngIfはAngularで使える便利なツールの１つ。これを使うと「もし〜なら、これを表示する」という条件付きで画面に何かを表示させたり隠したりすることができるようになります。ユーザの状態や選択に応じて画面表示をさせたいような場合に非常に便利で、様々な場面で利用されます。

<!-- ログインしている場合に表示 -->
<p *ngIf="isLoggedIn; else notLoggedIn">ようこそ！</p>

<!-- ログインしていない場合に表示 -->
<ng-template #notLoggedIn>
  <p>ログインしてください</p>
</ng-template>

このページでは、*ngIfの使い方の基本とコツを３分でわかりやすく解説します。

参考　TypeScriptの基本

Angular：*ngIf の基本

Angularの*ngIfは、Angularのテンプレート構文の一部で、特定の条件が真（true）の場合に、DOMにコンポーネントまたはHTML要素を表示するために使用されます。条件が偽（false）の場合、要素はDOMから完全に削除されます。

「もし（if）この条件が真（true）なら、これを表示して」と指示を出しているようなもので、簡単に言うと、ある条件によって画面に表示する内容を変えられる魔法のようなものだと言えます。

*ngIfは、動的にコンテンツを表示したり、逆に隠したりする場合に非常に役立ちます。例えば、ログインしている場合には「ようこそ！」と表示し、ログインしていない場合には「ログインしてください」という文言を表示したい！というような場合に便利です。

<!-- ログインしている場合に表示 -->
<p *ngIf="isLoggedIn; else notLoggedIn">ようこそ！</p>

<!-- ログインしていない場合に表示 -->
<ng-template #notLoggedIn>
  <p>ログインしてください</p>
</ng-template>

もちろん、使い方を工夫することで実現できる機能は無限大です。（ユーザがこの商品をお気に入り登録していたら・・・とか、ユーザのセッションが切れていたら・・・とか。）

*ngIf の構文ルール

<要素名 *ngIf="条件">表示したい内容</要素名>

• 要素名　→div、p、spanなど、HTMLの任意の要素名。
• 条件　→表示するかどうかを決めるための条件。この条件がtrue（真）の場合にのみ指定した要素が表示される。
• 表示したい内容　→条件が真の場合に画面に表示されるテキスト。

*ngIfの基本は、条件がtrueかfalseかによって、HTMLの特定の部分を表示させるかどうかをコントロールすることです。まずはシンプルなサンプルコードでその基本的な動作原理を理解しましょう。

サンプルコード　単純な条件で表示/非表示を切り替える

<p *ngIf="isLoggedIn">ようこそ、ユーザー様！</p>

isLoggedIn（ログインしているかどうかの状態を表す変数）がtrueの場合にのみ、<p>タグ内の「ようこそ、ユーザー様！」というメッセージが表示されます。もし、isLoggedInがfalseであればメッセージは表示されません。

*ngIfにelse条件を付与する

*ngIfディレクティブにelse条件を加えることで、条件がfalseの時に表示する内容を指定することができます。「もし条件が真（true）ならこの内容を表示し、そうでなければ（else）別の内容を表示する」という動作。

ここでは、elseの使い方を具体的なステップで説明します。

ステップ1: elseブロック用のテンプレートを作る

まず、条件がfalseの時に表示したい内容を<ng-template>タグで囲み、このテンプレートに名前をつけます。この名前は後で*ngIfで参照します。

<ng-template #templateRefName>
  <p>この内容は条件がfalseの時に表示されます。</p>
</ng-template>

ステップ2: *ngIfにelse条件を追加

次に、条件がtrueの時に表示したい内容のある要素に*ngIfを設定し、そのディレクティブ内でelseキーワードを使ってステップ1で作ったテンプレート参照変数名を指定します。

<!-- 条件がtrueの時に表示 -->
<div *ngIf="isLoggedIn; else notLoggedIn">
  <p>ログイン済みです。</p>
</div>

<!-- 条件がfalseの時に表示するテンプレート -->
<ng-template #notLoggedIn>
  <p>ログインが必要です。</p>
</ng-template>

この例では、isLoggedInがtrueなら「ログイン済みです。」が表示され、falseなら「ログインが必要です。」が表示されます。

*ngIfとelseを組み合わせることで、条件によって表示を切り替えることができるようになります。<ng-template>とテンプレート参照変数を使うことで、条件が偽の時の表示内容を自由にカスタマイズできます。これにより、より動的でユーザーフレンドリーなウェブアプリケーションを作成することが可能になります。