48007

How to show only one ul at a time in angular using ngFor

Question:

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 icon, I wanted to open a ul element. The problem is the number of popups that gets displayed depends on the number of rows. If 5 rows are added, then 5 popups are displayed. Ideally, I need only one popup to be displayed, for Person 4 row it should be the popup with 33( basically the popup the is present for that particular row). I tried to add *ngIf = i> 1 condition, but the popup with 00 is only displayed every time which is not correct because the popup position will always be in parallel to Person 1 position.

<div> <div *ngFor="let person of persons; let i = index"> <div> <div class="userIcon"> <div> <img class="person-img" src="assets/images/person.png" alt="My Profile"> </div> <div> <input id="form3" class="form-control" type="text"> <label for="form3" class="">{{person.name}}</label> </div> </div> </div> <div> <div> <input id="form5" class="form-control" #enteramount type="text"> <a class='dropdown-trigger sharebtn' href='#' data-target='dropdown{{i}}' (click)="shareIconClicked($event, i, enteramount)"></a> {{i}} <ul id='dropdown{{i}}' [ngClass]="{'popupShare': showPopup == true}" class='dropdown-content sharebtn-content'> <li> {{i}} Copy Message </li> <li>Whatsapp</li> <li>Email</li> </ul> </div> </div> </div> </div>

Below image represents the single popup after adding ngIf = 'isFirst'. I have clicked the Person 4 share icon. If I click the Person 3 share or Person 5 share icon, the popup is always positioned on the first row.

Answer1:

Just add check for first using *ngFor like this -

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

For more in details refer official docs -

<ul><li><a href="https://angular.io/api/common/NgForOf" rel="nofollow">https://angular.io/api/common/NgForOf</a></li> </ul>

Answer2:

You should try angular Mat-menu feature like this.

<div *ngFor="let person of persons; first as isFirst"> .... code <button mat-button [matMenuTriggerFor]="menu">Share</button> <mat-menu #menu="matMenu"> <button mat-menu-item (click)="sharteWithFacebook(person)">Facebook</button> <button mat-menu-item (click)="shareWithWhatapp(person)">Whatsapp</button> </mat-menu> </div>

Recommend

  • Angular Hide With Button
  • Importing angular component to be available in all modules
  • how to get selected value of radio in reactive form
  • Angular2 simple Http service Injection
  • How can we set the default value of radio button in angular 2
  • Understanding Angular2 change event
  • md-autocomplete onSelectionChange fired twice
  • How to parse multiple single xml elements in .Net C#
  • How do I make a SKSpriteNode that does not respond to touch if it's pixels are transparent?
  • How to update the UI immediately when a new record is added? Related to ember-cli-pagination
  • Find record, that has ALL associated records
  • How can I get the maximum number of OpenMP threads that may be created during the whole execution of
  • Ray-tracing triangles
  • Simple Angular 2 app gives “Potentially unhandled rejection” error
  • How to start server for Selenium grid Java Maven setup
  • Number of threads being used during Parallel.ForEach
  • std::remove_copy_if_ valgrind bytes in block are possibly lost in loss record
  • presentShareDialogWithParams posts to FB wall, but callback handler results say error
  • How to write order and limit within cakephp joins array
  • FileReader+canvas image loading problem
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • MySQL WHERE-condition in procedure ignored
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Cannot Parse HTML Data Using Android / JSOUP
  • Proper way to use connect-multiparty with express.js?
  • Java static initializers and reflection
  • unknown Exception android
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal