So I have an array of items. I want to show these items and when they are more than two, a button will show up instead with the number of the remaining items and their name.

 <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>

My problems:

• the button with the number of the rest of the items shows more than once since it is under ngFor, and I need the ngFor to show the item.Name, how to fix that?

• is there a better way to display the number of the rest of items instead of + {{items?.length-2}}