How can i limit ngFor in Angular HTML?

user_9526324 0
Viewed 125

i need to ngFor with limit 4 items, but if data < 4, i need to force to loop until 4

Example at this

<img *ngFor="let item of [1,2,3,4]"
    src="assets/images/no-image.jpg"
    style="border-radius: 50%; height:90%;" />
angular typescript html
4 Answers

Try this way:

<div *ngFor="let item of list; let i=index">
   <img *ngIf="i<4">{{item.text}}</img>
</div>
user_125563590

Try this way 

<ng-container *ngFor="let item of [1,2,3,4] ; let i = index">
   <img *ngIf="i < 4"
    src="assets/images/no-image.jpg"
    style="border-radius: 50%; height:90%;" />
</ng-container>
user_106474310

Since you define your array somewhere in your code, the easiest way would be to slice it there. Otherwise you can use the slice pipe so that you can do it right in your code. See https://angular.io/api/common/SlicePipe

So for you you would just add | slice:0:4 to the end of your ngFor

Edit: Sorry, I guess I should have read more carefully. I wrote a Plunker Demo for this. You can either use the pipe or the component logic solution.

Plunker Demo

user_75398980

Try this way

[src]="imageSrc ? imageSrc  : defaultImage"

Here imageSrc is the src of the image you wants to put and defaultImage is the src of the image if not available. Use this way

<img *ngIf="i < 4">
user_94273950
Related