angular-20-control-flow

SKILL.md

Purpose This skill provides comprehensive guidance on Angular 20's built-in control flow syntax, which introduces new template syntax (@if, @for, @switch, @defer) that replaces structural directives with better performance, type safety, and developer experience.

| Syntax error with @ blocks | Ensure Angular 20+ and update compiler | | @for without track error | Always add track expression to @for | | @defer not lazy loading | Check bundle config and verify component is in separate chunk | | Type errors with @if | Use as alias for type narrowing |

| @empty not showing | Ensure collection signal returns empty array, not undefined |

Angular 20 內置控制流語法（@if、@for、@switch、@defer）用於現代模板編程。在編寫具有條件渲染、循環、switch 語句或延遲加載組件的模板時使用。使用新的塊語法替換 *ngIf、*ngFor、*ngSwitch，以獲得更好的性能和類型安全性。 來源：7spade/black-tortoise。

查看原文