@if, @for और @switch

@if / @else

Angular 17 से, @if और @else टेम्पलेट कंपाइलर में पहले से बने हैं — किसी डायरेक्टिव को import करने की ज़रूरत नहीं।

@if (isLoggedIn) {
  <p>Welcome back!</p>
} @else {
  <p>Please log in.</p>
}

track के साथ @for

@for को एक track एक्सप्रेशन चाहिए ताकि लिस्ट बदलने पर Angular DOM को कुशलता से अपडेट कर सके।

@for (item of cartItems; track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>Your cart is empty.</li>
}

@switch

@switch कई @case ब्लॉक में से एक चुनता है, साथ में वैकल्पिक @default।

@switch (status) {
  @case ('loading') { <p>Loading…</p> }
  @case ('error')   { <p>Something went wrong.</p> }
  @default          { <p>Ready.</p> }
}

पुराना सिंटैक्स जो अब भी दिखेगा

पुराने कोड में *ngIf और *ngFor जैसे स्ट्रक्चरल डायरेक्टिव उपयोग होते थे। ये अब भी काम करते हैं, पर नए कोड के लिए @if/@for की सिफ़ारिश की जाती है — कोई import नहीं, और बेहतर प्रदर्शन।

त्वरित जाँच: `@for` किस चीज़ की माँग करता है जो `*ngFor` सख़्ती से ज़रूरी नहीं बनाता था?

• एक `track` एक्सप्रेशन
• एक `@empty` ब्लॉक
• Signal में लिपटा हुआ array