Course Progress 44%

Angular Lists (ngFor)

← Conditional Rendering TrackBy Optimization →

Angular में Lists Rendering का मतलब है कि किसी array या collection के data को template में dynamically repeat करके दिखाना। इसके लिए Angular का सबसे important structural directive है *ngFor.

इस chapter में आप सीखेंगे:

  • *ngFor क्या है
  • Array और object lists render करना
  • Index, first, last, even, odd का use
  • trackBy से performance improve करना
  • Nested lists render करना

*ngFor क्या है

*ngFor एक structural directive है जो किसी array के हर item के लिए DOM element create करता है।
Angular internally इसे ng-template में convert करके efficient rendering करता है।

Syntax

<li *ngFor="let item of items">...</li>

Simple List Rendering

Example

export class AppComponent {
  fruits = ['Apple', 'Banana', 'Mango'];
}

<ul>
  <li *ngFor="let fruit of fruits">
    {{ fruit }}
  </li>
</ul>

Explanation

  • fruits एक array है
  • *ngFor array के हर element पर loop चलाता है
  • हर iteration में नया <li> DOM में create होता है

Using Index in ngFor

Example

<li *ngFor="let fruit of fruits; index as i">
  {{ i + 1 }}. {{ fruit }}
</li>

Explanation

  • index as i current loop index देता है
  • i zero-based होता है, इसलिए display के लिए +1 किया गया है

Other ngFor Local Variables

Angular ngFor के साथ कुछ built-in variables देता है।

<li *ngFor="let fruit of fruits; 
            index as i; 
            first as isFirst; 
            last as isLast;
            even as isEven;
            odd as isOdd">
  {{ fruit }}
</li>

Explanation

  • first → पहला element है या नहीं
  • last → आख़िरी element है या नहीं
  • even → even index
  • odd → odd index

इनका use UI styling और conditional logic में किया जाता है।

Rendering List of Objects

Example

export class AppComponent {
  users = [
    { id: 1, name: 'Rahul', age: 25 },
    { id: 2, name: 'Amit', age: 30 },
    { id: 3, name: 'Neha', age: 28 }
  ];
}

<tr *ngFor="let user of users">
  <td>{{ user.id }}</td>
  <td>{{ user.name }}</td>
  <td>{{ user.age }}</td>
</tr>

Explanation

  • ngFor objects की list पर भी same तरह काम करता है
  • Dot notation से object properties access होती हैं

Nested ngFor

Example

export class AppComponent {
  categories = [
    { name: 'Fruits', items: ['Apple', 'Banana'] },
    { name: 'Vegetables', items: ['Potato', 'Tomato'] }
  ];
}

<div *ngFor="let category of categories">
  <h3>{{ category.name }}</h3>
  <ul>
    <li *ngFor="let item of category.items">
      {{ item }}
    </li>
  </ul>
</div>

Explanation

  • Outer ngFor categories पर loop करता है
  • Inner ngFor हर category के items render करता है
  • Nested lists के लिए common pattern है

trackBy – Performance Optimization

जब list frequently update होती है, Angular default behavior में DOM elements destroy और recreate करता है।
trackBy से Angular को बताया जाता है कि कौन सा item same है।

Example

export class AppComponent {
  users = [
    { id: 1, name: 'Rahul' },
    { id: 2, name: 'Amit' }
  ];

  trackById(index: number, user: any) {
    return user.id;
  }
}

<li *ngFor="let user of users; trackBy: trackById">
  {{ user.name }}
</li>

Explanation

  • trackById function unique identifier return करता है
  • Angular DOM elements को reuse करता है
  • Large lists में performance significantly improve होती है

Common Mistakes

  • trackBy का use न करना large lists में
  • Complex logic सीधे template में लिखना
  • Nested ngFor को बिना जरूरत के deep करना

Best Practices

  • Large या dynamic lists में हमेशा trackBy use करें
  • List logic component class में रखें
  • UI को readable रखने के लिए local variables use करें
  • Nested loops limited रखें

Summary

इस chapter में आपने सीखा:

  • Angular में list rendering का concept
  • *ngFor का syntax और behavior
  • Index, first, last, even, odd variables
  • Objects और nested lists render करना
  • trackBy से performance optimize करना
← Conditional Rendering TrackBy Optimization →
  • Home