*ngFor 哪种方法更好：ng-container 或 pipe slice？

Question

I want to show full list or only its 3 elements - conditionally ( more=true/false ). I can use pipe approach like this

<div class="table">
  <div *ngFor="let item of list|slice:0:(more ? undefined : 3 )" class="row">
      {{ item.id }} {{ item.name }}
  <div>
</div>

or ng-container approach like this

<div class="table">
  <ng-container *ngFor="let item of list; index as i">
    <div *ngIf="i<3 || more" class="row">
      {{ item.id }} {{ item.name }}
    </div>
  <ng-container>
</div>

But I don't know: which approach is better in terms of performance?

UPDATE: More about this case here: How to 'show more' rows using *ngFor

Answer 1

1. The first one (pipe) will only call the slice method once and iterate through the template depending on the items that will be displayed ( 3 or all ),
2. while the second one (guard) will always iterate through all elements in the array and evaluate every *ngIf .

Answer 2

I think the first one would be faster in terms of performance. Although, there's going to be somewhere within 10ms of a gap that isn't really noticeable by the user.

Maybe that would be clear once the logic or the list to render scales in size.

You could always perform a Performance Audit to compare which one takes more time rendering.

This is what the slice approach gave me:

And the ng-container gave me this:

But then, as I said, the difference of just 7ms won't be noticeable. But then again, there's no harm in going with the more performant approach.

Here's a Working Demo that you can use to compare both of them.

Answer 3

SlicePipe is an impure pipe. That means it runs every time change detection runs on your component.

The pipe creates a new array every time it's called, so it could result in excessive garbage collection if change detection is running frequently on your component.

You can see the effect by creating your own pipe and adding a log statement to it:

@Pipe({name: 'myslice', pure: false})
export class MySlicePipe extends SlicePipe {
  transform(value: any, start: number, end?: number): any {
    console.log('Calling MySlicePipe...');
    return super.transform(value, start, end);
  }
}

Try triggering a (click) handler on your component while using the myslice pipe. You'll see Calling MySlicePipe repeatedly in the console, indicating a new array being created each time. Demo here .

So, in terms of performance, I'd say the NgIf option is preferable.