After incorporating a slice pipe into the data object below and passing that data to the child component's @Input method, there appears to be an endless loop of calls to that method. However, eliminating the slice pipe from the data object resolves this issue, as the @Input method is only triggered once.
Template of the Parent component:
<ng-container
*ngIf="[
{ name: 'a', order: 1 },
{ name: 'b', order: 2 },
{ name: 'c', order: 3 },
{ name: 'd', order: 4 },
{ name: 'e', order: 5 }] | slice:0:3 as data"
>
<slice-pipe-test [testData]="data"></slice-pipe-test>
</ng-container>
Typescript code of the Child component:
@Input()
set testData(testData) {
console.log(testData);
}
Above link displays the infinite calls in the console:
For full sample code (ensure to add " | slice:0:3 " to the data object in app.component.html as depicted above, causing the endless calls and browser freeze):
https://codesandbox.io/s/3dg47
Could this possibly be related to change detection or an impurity in SlicePipe? Moving the sliced data object into the typescript file seems to resolve the issue. Is there a way to maintain the slice in the html template without causing continuous calls to the child component's @Input method?