Angular 15 ngFor

In Angular 15, the ngFor directive is a template directive that allows you to render a template for each item in a collection. It is similar to a for-loop in JavaScript.

Here's an example of how you might use ngFor in a template:

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

This will render a li element for each item in the items collection. The *ngFor syntax is a microsyntax that expands into a template for each item in the collection.

You can also use the ngFor directive to loop over an array of objects and access the properties of those objects. For example:

<ul>
  <li *ngFor="let user of users"></li>
</ul>

This will render a li element for each object in the users array, and the `` expression will be replaced with the name property of each object.

You can also use the ngFor directive to loop over an array of objects and render a different template for each object. To do this, you can use the ngFor directive with the ngTemplateOutlet directive, like this:

<ng-template ngFor let-item [ngForOf]="items">
  <div *ngIf="item.type === 'fruit'">

  </div>
  <div *ngIf="item.type === 'vegetable'">
     (vegetable)
  </div>
</ng-template>

This will render a div element for each item in the items array, and the template for each div will be determined by the value of the type property of the item.

Accessing the index of an item in the collection

You can use the index variable to access the index of each item in the collection. For example:

<ul>
  <li *ngFor="let item of items; index as i">: </li>
</ul>

This will render a li element for each item in the items collection, with the index of the item displayed before the item value.

Accessing the first and last items in the collection

You can use the first and last variables to determine whether an item is the first or last item in the collection. For example:

<ul>
  <li *ngFor="let item of items; first as isFirst">

  </li>
</ul>

This will render a li element for each item in the items collection, with the text "First item: " displayed before the value of the first item.

You can also use the last variable in the same way to determine whether an item is the last item in the collection.

Accessing even and odd items in the collection

You can use the even and odd variables to apply styles to even and odd items in the collection. For example:

<ul>
  <li *ngFor="let item of items; even as isEven; odd as isOdd"
      [ngClass]="{ even: isEven, odd: isOdd }">

  </li>
</ul>

This will apply the even and odd CSS classes to the li elements depending on whether they are even or odd items in the collection. You can then define these classes in your CSS to apply different styles to even and odd items.

Using trackBy with ngFor

You can use the trackBy function to improve the performance of ngFor when working with large collections. The trackBy function allows Angular to track items in the collection and identify which items have changed, rather than re-creating all items in the collection on each change detection cycle.

To use trackBy, you can provide a function that takes an index and the current item as arguments and returns a unique value that identifies the item. For example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <ul>
      <li *ngFor="let item of items; trackBy: trackByFn"></li>
    </ul>
  `
})
export class MyComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  trackByFn(index: number, item: any) {
    return item.id;
  }
}

In this example, the trackByFn function returns the id property of each item, which is a unique value that identifies the item. Angular will use this value to track items in the collection and determine which items have changed.

Accessing the current item in the template

You can use the let keyword to bind the current item in the collection to a template variable. For example:

<ul>
  <li *ngFor="let item of items">

    <button (click)="deleteItem(item)">Delete</button>
  </li>
</ul>

In this example, the item variable is bound to the current item in the items collection, and it can be used in the template to access the properties of the item.

Providing a template context for each item in the collection

You can use the let keyword to provide a template context for each item in the collection. This can be useful if you want to access a local template variable within a nested template.

For example:

<ul>
  <ng-template ngFor let-item [ngForOf]="items">
    <li>

      <ng-template #nested>
        <div></div>
      </ng-template>
      <ng-container *ngTemplateOutlet="nested"></ng-container>
    </li>
  </ng-template>
</ul>

In this example, the item variable is bound to the current item in the items collection, and it can be used within the nested template to access the properties of the item.

• Date: 05 Jan 2023