2026年のAngular制御フロー構文：@if、@for、@switch完全ガイドと面接対策

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-user-status',
  template: `
    @if (user().role === 'admin') {
      <app-admin-panel />
    } @else if (user().role === 'editor') {
      <app-editor-panel />
    } @else {
      <app-viewer-panel />
    }
  `
})
export class UserStatusComponent {
  user = input.required<{ role: string }>();
}

<!-- プロパティへの繰り返しアクセスを回避 -->
@if (user().profile?.settings?.theme; as theme) {
  <p>現在のテーマ: {{ theme }}</p>
}

import { Component, input } from '@angular/core';

interface Product {
  id: string;
  name: string;
  price: number;
}

@Component({
  selector: 'app-product-list',
  template: `
    @for (product of products(); track product.id) {
      <app-product-card [product]="product" />
    } @empty {
      <p>商品がありません</p>
    }
  `
})
export class ProductListComponent {
  products = input.required<Product[]>();
}

@for (item of items(); track item.id; let i = $index, isLast = $last) {
  <li class="item" [class.last]="isLast">
    {{ i + 1 }}. {{ item.name }}
  </li>
}

import { Component, input } from '@angular/core';

type OrderStatus = 'pending' | 'processing' | 'shipped' | 'delivered';

@Component({
  selector: 'app-status-badge',
  template: `
    @switch (status()) {
      @case ('pending') {
        <span class="badge badge-gray">保留中</span>
      }
      @case ('processing') {
        <span class="badge badge-blue">処理中</span>
      }
      @case ('shipped') {
        <span class="badge badge-yellow">発送済み</span>
      }
      @case ('delivered') {
        <span class="badge badge-green">配達完了</span>
      }
    }
  `
})
export class StatusBadgeComponent {
  status = input.required<OrderStatus>();
}

@switch (userRole()) {
  @case ('admin')
  @case ('superadmin') {
    <app-admin-dashboard />
  }
  @case ('editor')
  @case ('reviewer') {
    <app-editor-dashboard />
  }
  @default {
    <app-viewer-dashboard />
  }
}

type Theme = 'light' | 'dark' | 'system';

// @caseブロックにTheme値が不足している場合、コンパイルエラーが発生
@switch (theme()) {
  @case ('light') { /* ... */ }
  @case ('dark') { /* ... */ }
  @case ('system') { /* ... */ }
  @default never;
}

import { Component, computed, signal } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  template: `
    @if (isLoading()) {
      <app-skeleton />
    } @else if (hasError()) {
      <app-error [message]="errorMessage()" />
    } @else {
      @for (item of filteredItems(); track item.id) {
        <app-item-card [item]="item" />
      } @empty {
        <p>フィルター条件に一致するアイテムがありません</p>
      }
    }
  `
})
export class DashboardComponent {
  items = signal<Item[]>([]);
  filter = signal('');
  isLoading = signal(true);
  hasError = signal(false);
  errorMessage = signal('');

  // computed signalは依存関係が変更されたときのみ再計算
  filteredItems = computed(() =>
    this.items().filter(item =>
      item.name.toLowerCase().includes(this.filter().toLowerCase())
    )
  );
}

// *ngIfとasyncパイプの場合（レガシー）
<div *ngIf="user$ | async as user">{{ user.name }}</div>

// @ifとシグナルの場合（モダン）
@if (user(); as user) {
  <div>{{ user.name }}</div>
}

<!-- 単一の式、複数の値には@switchを使用 -->
@switch (status()) {
  @case ('active') { ... }
  @case ('inactive') { ... }
}

<!-- 複数の式には@ifを使用 -->
@if (isAdmin() && hasPermission('write')) {
  ...
} @else if (isEditor()) {
  ...
}

# プロジェクト全体を移行
ng generate @angular/core:control-flow

# 特定のディレクトリを移行
ng generate @angular/core:control-flow --path=src/app/features