delete the same selected row when use confirm massage in primeNG

Question

In my angular project and by using primeNg table I want to delete row after confirmation, so every row has a delete button when click on it the confirmation message showing, but the problem when click on confirm button the last row in the table deleted, not the same row was selected.

This my HTML :

 <button class="btn btn-danger" (click)="showConfirm()"><span class="fa fa-trash"></span></button>

<p-toast position="center" key="c" (onClose)="onReject()" [modal]="true" [baseZIndex]="5000">
    <ng-template let-message pTemplate="message">
        <div style="text-align: center">
            <i class="pi pi-exclamation-triangle" style="font-size: 3em"></i>
            <h3>{{message.summary}}</h3>
            <p>{{message.detail}}</p>
        </div>
        <div class="ui-g ui-fluid">
            <div class="ui-g-6">
                <button type="button" pButton (click)="onConfirm(rowData.id)" label="yes" class="ui-button-success"></button>
            </div>
            <div class="ui-g-6">
                <button type="button" pButton (click)="onReject()" label="No" class="ui-button-secondary"></button>
            </div>
        </div>
    </ng-template>
</p-toast>

in components.ts i use this methods:

  showConfirm() { // to show confirm massage
    this.messageService.add({key: 'c', sticky: true, severity:'warn', summary:'!Delete confirm', detail:'Are you shur to dlelete this client '});
  }

 onConfirm(id:Clients) {
    this.Service.deleteClient(id).subscribe(res => {})

  onReject() {
    this.messageService.clear('c');
}

referance of primeNg:[https://www.primefaces.org/primeng/#/toast]

Update

when I try to put the parameter rowData.id in showConfirm method in HTML and in components.ts showConfirm(id:Clients) and use concatenation in massage detail showing the selected row,

HTML

<button class="btn btn-danger" (click)="showConfirm(rowData.id)"><span class="fa fa-trash"></span></button>

components.ts

showConfirm(id:Clients) { // to show confirm massage
    this.messageService.add({key: 'c', sticky: true, severity:'warn', summary:'!Delete confirm', detail:'Are you shur to dlelete this client '+id});
  }

but i dont know how to pass the same parameter from showConfirm(id:Clients) to onConfirm() method.

The problem probably comes from from the "rowData.id" that your confirm button references to, are you sure this is linked in any way to the delete button of the specific row you're trying to delete ? Each delete buttons should probably pass the current row's id when they call "showConfirm()", so that your dialog knows which id is attempted to be deleted. — Beerbossa
Thanks a lot for your support, there is no problem in rowData.id could you check-update, please. — Mohamed Elkast
Maybe I have miss understanding, all I need when I click on delete button show confirm message and after click yes button will delete the same row — Mohamed Elkast

Ehsan Kiani Ehsan Kiani · Accepted Answer · 2019-12-02T05:36:16

Well, I don't know if I'm got it right. But the way I would do it would be:

1-decalre a variable like deleteCandidate.

2-update it on showConfirm method.

showConfirm(id:Clients) { // to show confirm massage
this.deleteCandidate=id;
    this.messageService.add({key: 'c', sticky: true, severity:'warn', summary:'!Delete confirm', detail:'Are you shur to dlelete this client '+id});
  }

3-pass it to onConfirm.

 onConfirm(id:Clients)<--this parameter is useless
 {
        this.Service.deleteClient(this.deleteCandidate).subscribe(res => {})

delete the same selected row when use confirm massage in primeNG

2 Answers