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와 Signal 사용 (모던)
@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