When we develop angular forms we may have to ngFor many time to show data on dynamic table rows, dynamic forms , dynamic div and so on. Developer will define some property on type script class and it will be iterate on html page.
In practical use case lets assume there is a list of objects having 10 objects. And developer only need to loop a part of list. Below I have shown how to achieve it.
Type script

public styleList: any = [];
ngOnInit() {
this.styleList.push('style one');
this.styleList.push('style two');
this.styleList.push('style three');
this.styleList.push('style four');
}

Now lets check with HTML page
<div *ngFor=”let product of styleList |slice:0:3; let i=index”>
{{style}}
< div>
Now you can see the output that will iterate until first element to third element in the list using slice syntax.
Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

WP Facebook Auto Publish Powered By : XYZScripts.com