onclick display only particular popup

Question

I have been working on displaying popup box in angular2 When i click on button particular popup should only get displayed Please check the link https://embed.plnkr.co/8PypLpWxYABmeJVqAXTL/ and help me out of this issue

Answer 1

You were missing let i = index on your *ngFor

<div>

  <div class="conform">
    <div class="details" *ngFor="let name of names; let i = index">

      <p>{{name.city}}</p>
      <button (click)="clicked(i)" class="btn btn-primary">JOIN RIDE</button>

      <div  class="dialogBoxStyle" *ngIf="showIndex === i && showDialog">
        <p>Your Pickup Time:</p>
        <p>8:30AM </p>
        <p>
          <button (click)="cancel()">cancel</button>
          <button>confirm</button>
        </p>
      </div>

    </div>
  </div>

</div>

See plunker https://plnkr.co/edit/HZdZE0?p=preview

Answer 2

The problem is that you have the same showDialog for all the three elements each object should have their own showDialog and showBollean values.

    //our root app component
    import {Component, NgModule, VERSION} from '@angular/core'
    import {BrowserModule} from '@angular/platform-browser'

    @Component({
      selector: 'my-app',
      template: `
        <div>
    <div class="conform">
        <div class="details" *ngFor="let name of names">
            <p>{{name.city}}</p>
            <button (click)="clicked(name)" class="btn btn-primary">JOIN RIDE</button>


            <div class="dialogBoxStyle" *ngIf="name.showDialog">
                <p>Your Pickup Time:</p>
                <p>8:30AM </p>
                <p><button (click)="cancel()">cancel</button><button>confirm</button></p>
            </div>

        </div>
    </div>
</div>
      `,
    })

 export class App {
  names:string;
  constructor() {

        this.names = [
  {

    "city": "Select one city",
    "showDialog": false  
  },
  {
   "showDialog": false,    
    "city": "Hyderabad"
  },
  {
    "showDialog": false,    
    "city": "Banglore"
  }
];

  public showDialog:boolean = false;

   public showIndex:number;
     clicked(name) {
       console.log(name)
    name.showDialog = true;
    //this.showIndex = i;
    }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}