Course Progress 79%

Angular Control Flow (New Syntax)

← TrackBy Optimization Signals & Reactive Rendering →

Modern Angular (v17 और उसके बाद) में Control Flow के लिए एक नया, ज्यादा readable और performant syntax introduce किया गया है। यह syntax traditional structural directives (*ngIf, *ngFor, *ngSwitch) का replacement नहीं, बल्कि उनका modern alternative है।

नया control flow syntax template को ज्यादा साफ़, predictable और compiler-friendly बनाता है, खासकर large और complex applications में।

Why New Control Flow Syntax

पुराने syntax में:

  • * micro-syntax confusing हो सकता है
  • Nested *ngIf और ng-template readability कम कर देते हैं
  • Compiler को implicit behavior समझना पड़ता है

नए syntax में:

  • Explicit blocks होते हैं
  • JavaScript जैसी readability मिलती है
  • Tree-shaking और performance बेहतर होती है

@if – Modern Conditional Rendering

Basic Syntax

@if (isLoggedIn) {
  <p>Welcome User</p>
}

यह syntax directly बताता है कि condition true होने पर कौन सा block render होगा।

With @else

@if (isLoggedIn) {
  <p>Welcome User</p>
} @else {
  <p>Please login</p>
}

यह पुराने *ngIf + else + ng-template से कहीं ज्यादा readable है।

Multiple Conditions

@if (isAdmin) {
  <p>Admin Panel</p>
} @else if (isLoggedIn) {
  <p>User Dashboard</p>
} @else {
  <p>Guest View</p>
}

यह syntax almost JavaScript if / else if / else जैसा ही है, इसलिए complex UI logic ज्यादा clean दिखता है।

@for – Modern List Rendering

Basic Syntax

@for (item of items) {
  <li>{{ item }}</li>
}

यह *ngFor का modern equivalent है।

With Index and Local Variables

@for (user of users; track user.id; let i = $index) {
  <p>{{ i + 1 }}. {{ user.name }}</p>
}

यहाँ:

  • $index built-in loop index है
  • track user.id Angular को identity बताता है (default optimization)

Difference from *ngFor

  • trackBy अब optional नहीं, first-class feature है
  • Loop variables explicit होते हैं
  • Compiler इसे ज्यादा aggressively optimize कर सकता है

@switch – Multi-Condition Rendering

Syntax

@switch (status) {
  @case ('loading') {
    <p>Loading...</p>
  }
  @case ('success') {
    <p>Data Loaded</p>
  }
  @case ('error') {
    <p>Error occurred</p>
  }
  @default {
    <p>Unknown state</p>
  }
}

यह ngSwitch, ngSwitchCase, ngSwitchDefault का modern replacement है।

Advantages:

  • Single readable block
  • No attribute clutter
  • Better static analysis

@defer – Lazy Rendering Control

@defer Angular का सबसे powerful नया control flow feature है।
यह UI को conditionally और lazily render करने देता है।

Basic Example

@defer {
  <app-heavy-component />
}

यह component तुरंत render नहीं होगा।

With Trigger

@defer (on viewport) {
  <app-chart />
}

यह component तभी render होगा जब viewport में आएगा।

With Placeholder

@defer (on idle) {
  <app-dashboard />
} @placeholder {
  <p>Loading dashboard...</p>
}

यह approach:

  • Initial load fast करता है
  • Performance critical apps के लिए ideal है

@loading और @error Blocks

@defer {
  <app-data-view />
} @loading {
  <p>Fetching data...</p>
} @error {
  <p>Failed to load data</p>
}

Angular automatically component load lifecycle handle करता है।

Control Flow vs Old Structural Directives

Old syntax अभी भी supported है, लेकिन:

  • New projects में new control flow syntax recommended है
  • Legacy apps में gradual migration possible है
  • Mixing allowed है, लेकिन consistency maintain करनी चाहिए

Performance Perspective

New control flow syntax:

  • Compile-time optimized होता है
  • Fewer embedded views create करता है
  • DOM diffing ज्यादा efficient होती है
  • Signals और standalone components के साथ best work करता है

When to Prefer New Syntax

  • Angular v17+ projects
  • Standalone component based architecture
  • Performance sensitive UI
  • Complex conditional rendering

Migration Strategy

  • Existing *ngIf, *ngFor को तुरंत बदलना ज़रूरी नहीं
  • New features और components में नया syntax use करें
  • Gradually templates simplify करें

Angular का नया control flow syntax framework को modern frontend standards के बहुत करीब ले आता है।
Next logical chapter होगा Angular Signals and Reactive Rendering, जहाँ यही control flow और ज्यादा powerful बन जाता है।

← TrackBy Optimization Signals & Reactive Rendering →
  • Home