Modern Control Flow: @if and @for (New Angular Syntax)
Learn the modern Angular control flow syntax and write cleaner templates with @if and @for.
Modern Angular introduced a new template control flow syntax like `@if` and `@for`. It can make templates cleaner and more readable. ## @if example ```html @if (isLoggedIn) { <h2>Welcome back!</h2> } @else { <h2>Please sign in</h2> } ``` ## @for example ```html <ul> @for (skill of skills; track skill) { <li>{{ skill }}</li> } </ul> ``` Component: ```ts export class SkillsComponent { isLoggedIn = true; skills = ['TypeScript', 'Angular', 'RxJS']; } ``` ## Why developers like it - Templates read more like normal programming - Less `ng-template` noise in many cases - `track` is built in and encouraged ## When to use it If your Angular version supports it and your team agrees on style, it’s a great upgrade for readability. > Next set (remaining 30): Signals, computed/effect, advanced routing patterns, resolvers, state management, testing, and deployment.