Angular Control Flow Syntax ใหม่: @if, @for, @switch แทน *ngIf, *ngFor

Control Flow ใหม่ใน Angular 17

Angular 17 แนะนำ built-in control flow syntax ใหม่ที่ใช้ @ prefix แทน structural directives เดิม ทำให้โค้ดอ่านง่ายขึ้นและ performance ดีขึ้น

@if แทน *ngIf

<!-- เดิม -->
<div *ngIf="isLoggedIn; else loginBlock">
  ยินดีต้อนรับ
</div>
<ng-template #loginBlock>
  <p>กรุณาเข้าสู่ระบบ</p>
</ng-template>

<!-- ใหม่ -->
@if (isLoggedIn) {
  <div>ยินดีต้อนรับ</div>
} @else {
  <p>กรุณาเข้าสู่ระบบ</p>
}

@for แทน *ngFor

<!-- เดิม -->
<li *ngFor="let user of users; trackBy: trackById">
  {{ user.name }}
</li>

<!-- ใหม่ - track เป็น required -->
@for (user of users; track user.id) {
  <li>{{ user.name }}</li>
} @empty {
  <li>ไม่มีข้อมูล</li>
}

@switch แทน ngSwitch

<!-- เดิม -->
<div [ngSwitch]="status">
  <p *ngSwitchCase="'active'">ใช้งานอยู่</p>
  <p *ngSwitchCase="'inactive'">ไม่ได้ใช้งาน</p>
  <p *ngSwitchDefault>ไม่ทราบสถานะ</p>
</div>

<!-- ใหม่ -->
@switch (status) {
  @case ('active') { <p>ใช้งานอยู่</p> }
  @case ('inactive') { <p>ไม่ได้ใช้งาน</p> }
  @default { <p>ไม่ทราบสถานะ</p> }
}

ข้อดีของ Control Flow ใหม่

1. ไม่ต้อง import CommonModule หรือ NgIf, NgFor
2. Type narrowing ทำงานได้ดีกว่า
3. Performance ดีกว่าเพราะ compile เป็น optimized code
4. @empty ใน @for ช่วยจัดการ empty state ได้ง่าย

Migration

ng generate @angular/core:control-flow

สรุป

Control Flow ใหม่เป็น default ใน Angular 17+ ควรเริ่มใช้ในโปรเจ็คใหม่ทันที และ migrate โปรเจ็คเก่าด้วย schematic ครับ