I have a collection of items that I would like to display. In cases where there are more than two items, instead of showing all the items, I want to display a button with the number of remaining items and their names.
<div *ngFor="let item of items; let i = index">
<div>
<div class="avatar" *ngIf=" i<2" />
{{items.Name}}
</div>
<div *ngIf="i >= 2 && items?.length > 2">
<button class="avatar" mat-button [matMenuTriggerFor]="menu">+ {{items?.length-2}}</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>{{items.Name}}</button>
</mat-menu>
</div>
</div>
</div>
The issues I am facing:
The button displaying the number of remaining items is being repeated due to ngFor. How can I resolve this while still displaying item names using ngFor?
Is there a more efficient way to show the count of remaining items other than
+ {{items?.length-2}}?