title: angular Confirmation Box
body: <p>I am using PrimeNG table with a modal component that I built. The issue is my modal component has edit and delete. Edit works properly and it get the right row id, however delete always gets the id of the first row.</p>
  
  <p><strong>dashboard.html</strong></p>
  
  <pre><code> &lt;p-table #dt  [value]="iToDoList" dataKey="id"  [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
                               [rows]="10"&gt;
  
                          &lt;ng-template pTemplate="header"&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;ID&lt;/th&gt;
                                  &lt;th&gt;Comment&lt;/th&gt;
                                  &lt;th&gt;Action&lt;/th&gt;
  
                              &lt;/tr&gt;
                              &lt;/ng-template&gt;
                              &lt;ng-template pTemplate="body" let-row&gt;  
                                  &lt;tr&gt;
                                      &lt;td&gt;{{row.id}}&lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;div  *ngIf="!row.isEditable"&gt;{{row.comment}}&lt;/div&gt;
                                          &lt;div *ngIf="row.isEditable"&gt;
                                              &lt;input type="text" [(ngModel)]="row.comment"&gt;
                                              &lt;span *ngIf="isEmpty(row.comment)" style="color:crimson"&gt;Required&lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;div&gt;
                                              &lt;modal [row]="row"   [disableEditSaveButton]='disableSaveButton'   (deleteRow)="onDeleteToDoList(row)" [showModal]="!row.isEditable"  (selectedRow)="onSelectedRow(row)" (cancelEdit)="onCancelEdit(row)" (save)="onSave(row)"&gt;&lt;/modal&gt;
                                          &lt;/div&gt;
                                          &lt;!--&lt;button (click)="editRow(row)"&gt;Edit&lt;/button&gt;--&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;                                &lt;button (click)="save(row)"&gt;Save&lt;/button&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/ng-template&gt;
  
                      &lt;/p-table&gt;
  </code></pre>
  
  <p><strong>dashboard.component</strong></p>
  
  <pre><code>//the value of row id is always the first row
  
       onDeleteToDoList(row) {
  
              console.log('ON DELETe '+ row.id); 
  
          }
  
      //onSave works, it returns the id of current selected row
       onSave(row)
           {
              console.log('ON save '+ row.id); 
  
        }
  </code></pre>
  
  <p><strong>modal.html</strong>         </p>
  
  <blockquote>
    <p>The bold line below is the issue , inside confirm method is returning
    the correct row id , however, when user click on OK then row.id is
    always the first row in the table</p>
  </blockquote>
  
  <pre><code>    &lt;div&gt;
  
          &lt;div *ngIf='showModal'&gt;
              &lt;span class="fa fa-edit" (click)="onEdit()"&gt;
  
              &lt;/span&gt;&amp;nbsp;&amp;nbsp;
  //confirm method returns the right id            
  &lt;span class="fa fa-trash-o" (click)="confirm()" data-toggle="modal" data-target="#myModal"&gt;
  
              &lt;/span&gt;
              &lt;div class="modal fade" id="myModal" role="dialog"&gt;
                  &lt;div class="modal-dialog"&gt;
                      &lt;div class="modal-content"&gt;
                          &lt;div class="modal-header"&gt;
  
                              &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                              &lt;h4 class="modal-title"&gt;Confirm&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-body"&gt;
                              &lt;p&gt;Delete this record?&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
  //onOk method always returns the id of the first row
                              &lt;button type="button" class="btn btn-primary" data-dismiss="modal" (click)="onOk()"&gt;Yes&lt;/button&gt;
                              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;No&lt;/button&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>modal.component</strong></p>
  
  <pre><code>    @Output() deleteRow: EventEmitter&lt;any&gt; = new EventEmitter();
          @Output() save: EventEmitter&lt;any&gt; = new EventEmitter();
          @Output() edit: EventEmitter&lt;any&gt; = new EventEmitter();
          @Input() row: any;
  
      //onSave method is showing correctly 
    onSave() {
  
  
          this.save.emit(this.row);
      }      
          //showing incorrect id (this method is the issue)
          onOk() {
  
              this.showModal = true;
              console.log("inside " + this.row.id);
              this.deletedRow.emit(this.row);
  
          }
  
          //showing the correct id
          confirm()
          {
              console.log("confirm " + this.row.id);      
          }
  </code></pre>
  
  <p>***********************************************UPDATE******************************************
  <strong>Modal.html</strong></p>
  
  <p>this worked</p>
  
  <pre><code>   &lt;div *ngIf='showModal'&gt;
      &lt;span class="fa fa-edit" (click)="onEdit()"&gt;
  
      &lt;/span&gt;&amp;nbsp;&amp;nbsp;
      &lt;span class="fa fa-trash-o" (click)="BeforeModalOpen()"  data-toggle="modal" data-target="#myModal"&gt;
  
      &lt;/span&gt;
      &lt;div class="modal fade" id="myModal" role="dialog" &gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
  
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;Confirm&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;p&gt;Delete this record {{row.id}}?&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-primary"  (click)="onOk()"&gt;Yes&lt;/button&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;No&lt;/button&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>modal.component</strong></p>
  
  <pre><code> BeforeModalOpen shows the correct ID and onOK shows the incorrect one.
  
     BeforeModalOpen() {
      // clean the sessionStorage before using it again
      if(sessionStorage.getItem('tempRow')){
         sessionStorage.removeItem('tempRow');
      }
      console.log("inside BeforeModalOpen " + this.row.id);
  
      // make the object a JSON-string and store it
      sessionStorage.setItem('tempRow', JSON.stringify(this.row));
  }
  
  onOk() {
      // read it. parse it back to an object.
      const tempRow = JSON.parse(sessionStorage.getItem('tempRow'));
  
      // check it
      console.log("inside " + this.tempRow.id);
  
      // emit it
      this.deletedRow.emit();
  
      // close the modal
      $('#myModal').modal('hide');
  }
  </code></pre>
  
  <p><strong>dashboard.component</strong></p>
  
  <pre><code>onDeleteToDoList() {
          const tempRow = JSON.parse(sessionStorage.getItem('tempRow'));
  
          tempRow.isEditable = false;
          this.showEditOption = false;
          //this.iToDoList.filter(row =&gt; row.isEditable).map(r =&gt; { r.isEditable = false; return r })
          console.log('ON DELETe '+ tempRow.id);
  
  
      }
  </code></pre>