Angular how to use slicePipe in the new @for loop

Issue

How can you use the slicePipe with the new @for syntax in Angular?

@Component({
  selector: 'slice-list-pipe',
  template: `
    <ul>
      <li *ngFor="let i of collection | slice : 1 : 3">{{ i }}</li>
    </ul>
  `,
})
export class SlicePipeListComponent {
  collection: string[] = ['a', 'b', 'c', 'd'];
}

Solution

The @for syntax supports using the pipes and its application is the same as in the *ngFor. An important point is you must add the track expression in the @for syntax.

The mandatory track expression allows Angular to identify individual elements that have been moved within the iterated collection.

Reference: What’s new in Angular 17? (New Syntax for Control Flow in Templates section)

<ul>
  @for (i of collection | slice : 1 : 3; track $index) {
    <li>{{ i }}</li>
  }
</ul>

Demo @ StackBlitz

Answered By - Yong Shun