条件と繰り返し ― *ngIf と *ngFor

導入

「条件によって表示を切り替える」「配列を一覧にする」には、構造ディレクティブ *ngIf・*ngFor を使います。これらを使うには imports: [CommonModule] が必要です。

説明

imports に CommonModule を足すのがポイントです。

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button (click)="show = !show">切り替え</button>
    <p *ngIf="show">いま表示されています</p>
    <p *ngIf="!show">いまは隠れています</p>

    <h3>果物リスト</h3>
    <ul>
      <li *ngFor="let fruit of fruits">{{ fruit }}</li>
    </ul>
    <p>全 {{ fruits.length }} 件</p>
  `,
})
class AppComponent {
  show: boolean = true;
  fruits: string[] = ['りんご', 'みかん', 'ぶどう'];
}

• imports: [CommonModule] … *ngIf / *ngFor を使うために必要です（忘れるとエラーになります）。
• *ngIf="show" … show が true のときだけ、その要素を表示します。
• *ngFor="let fruit of fruits" … 配列 fruits を1つずつ取り出して <li> を繰り返します。
• 先頭の *（アスタリスク）が「構造を変えるディレクティブ」の印です。

やってみよう

fruits に果物を2つ足してみましょう。*ngFor に let i = index を足して（*ngFor="let fruit of fruits; let i = index"）、{{ i + 1 }}: {{ fruit }} と番号付きで表示してみてください。