# @if, @for और @switch — एंगुलर

Source: https://www.geekswithgeeks.com/hi/angular/ng-control-flow

> आधुनिक बिल्ट-इन कंट्रोल-फ्लो सिंटैक्स।

## @if / @else

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

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

## track के साथ @for

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

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

## @switch

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

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

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

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

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

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

*Answer:* एक `track` एक्सप्रेशन. `@for` में `track` अनिवार्य है और यह Angular को दोबारा-रेंडर होने पर आइटम को कुशलता से पहचानने में मदद करता है।