*ngFor Directive in Angular

When it comes to rendering lists in Angular, *ngFor is the directive developers reach for most often. It allows looping through arrays or collections in templates and renders elements dynamically.

Let’s take a closer look at what *ngFordoes, how it works under the hood, and how you can use it effectively with hands-on examples.

If you are looking for a video explanation, feel free to watch the video I posted on my channel InterviewPro.

What is *ngFor?

The *ngFor directive in Angular is used to repeat a section of the HTML template for each item in a list. It's similar to a for loop in JavaScript, but used directly in your HTML templates.

Syntax:

*ngFor="let item of items"

Examples:

Let’s say you have a component with the following array:

export class PlaylistComponent {
  playlists: string[] = ['Angular', 'React', 'JavaScript', 'Python'];
}

In your template, use ngFor to loop through each playlist and display it on the UI. For each item in the playlists array, Angular creates a new <li> element and assigns the current item to the playlist variable.

{{playlist}} interpolates the string and displays it inside the list item.

<!-- app.component.html -->
<ul>
  <li *ngFor="let playlist of playlists">{{ playlist }}</li>
</ul>


<!--Looks like this in the browser  -->
<ul>
  <li>Angular</li>
  <li>React</li>
  <li>JavaScript</li>
  <li>Python</li>
</ul>

Using index:

Sometimes, you want to display the position of each item in a list. Angular provides a built-in local variable index for this.

<ul>
  <li *ngFor="let playlist of playlists; let i = index">
    {{ i + 1 }}. {{ playlist}}
  </li>
</ul>

<!-- Output -->
1. Angular
2. React
3. JavaScript
4. Python 

let i = index stores the index (starting from 0) of the current item. We add 1 to display it as a human-readable position (1, 2, 3 instead of 0, 1, 2)

With objects:

You’re not limited to strings — *ngFor works with array of objects too.

playlists = [
  { id: 1, name: 'Angular' },
  { id: 2, name: 'React' },
  { id: 3, name: 'JavaScript' },
  { id: 4, name: 'Python' }
];

You can access the properties like:

<ul>
  <li *ngFor="let playlist of playlists">
    {{ playlist.id }} - {{ playlist.name }}
  </li>
</ul>

<!-- Output -->
1 - Angular
2 - React
3 - JavaScript
4 - Python

• Each object in the playlists array has an id and name property.
• Inside the loop, you access them using dot notation: playlist.id, playlist.name.

Local Variables:

Get InterviewPro’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Besides index, Angular provides several other local variables in *ngFor:

• index: the current loop index
• first: true if the item is the first in the iteration
• last: true if the item is the last
• even: true if the index is even
• odd: true if the index is odd

<ul>
  <li *ngFor="let playlist of playlists; let isOdd = odd">
    <span [style.color]="isOdd ? 'blue' : 'black'">
      {{ playlist.name }}
    </span>
  </li>
</ul>

Track items:

For performance, especially with large or dynamic lists, Angular allows you to use trackBy to identify items uniquely. This prevents Angular from re-rendering the entire list when only one item changes.

<li *ngFor="let playlist of playlists; trackBy: trackByUserId">
  {{ playlist.name }}
</li>

In your component:

trackByUserId(index: number, playlist: any): number {
  return playlist.id;
}

• By default, Angular tracks items by object identity.
• If an object reference changes (even if the data is the same), Angular re-renders it.
• With trackBy, Angular uses a unique key (playlist.id) to keep track of items more efficiently.

Use trackBy when,

• You’re loading large lists.
• Items may be updated frequently.
• You want to minimize unnecessary DOM manipulation.

Final Thoughts:

The *ngFor directive is essential for any Angular developer. Whether you're rendering a simple list or working with complex objects and performance considerations, mastering *ngFor gives you powerful control over dynamic data in the UI.

Key Takeaways:

• Use *ngFor to iterate over arrays or lists.
• Take advantage of local variables (index, first, last, even, odd).
• Use trackBy for performance on large or frequently updated lists.

If you found this article helpful, don’t forget to follow InterviewPro for more content on JavaScript tips and best practices!

Show your support on my YouTube channel too 😁.