How To Show Only One Ul At A Time In Angular Using Ngfor

I have the above image which has Add Person button, on click of Add person, Person 1 row gets created and so on. On the right end of each row, I have a share icon, on click of an i

Solution 1:

Just add check for first using *ngFor like this -

<div *ngFor="let person of persons; first as isFirst">
....
            <ulid='dropdown{{i}}' *ngIf='first'  [ngClass]="{'popupShare': showPopup == true}"class='dropdown-content sharebtn-content'>
...</ul></div>

For more in details refer official docs -

• https://angular.io/api/common/NgForOf

Solution 2:

You should try angular Mat-menu feature like this.

<div *ngFor="let person of persons; first as isFirst">
   .... code

  <buttonmat-button [matMenuTriggerFor]="menu">Share</button><mat-menu #menu="matMenu"><buttonmat-menu-item (click)="sharteWithFacebook(person)">Facebook</button><buttonmat-menu-item (click)="shareWithWhatapp(person)">Whatsapp</button></mat-menu></div>