Delete record by using toast confirm in primeNG

Question

I use primeNG in my angular project, in the table every row have a delete button to show confirm box(toast) then I need to delete the record after user click confirm button in the box,

my apologies because I'm really very new to this, so please forgive me for what some may seem a very basic question.

in my HTML

<button class="btn btn-danger" (click)="showConfirm(rowData.id)"><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()" label="confirm" class="ui-button-success"></button>
            </div>
            <div class="ui-g-6">
                <button type="button" pButton (click)="onReject()" label="calcel" class="ui-button-secondary"></button>
            </div>
        </div>
    </ng-template>
</p-toast>`enter code here`

and this my code in compontent.ts

... 
showConfirm(id:Clients) {
    this.messageService.add({key: 'c', sticky: true, severity:'warn', summary:'!تأكيد الحذف', detail:'هل تريد حذف هذا العميل؟'});}

onConfirm() {
// Here i need to delete the same record 

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

my service.ts

clientsUrl="http://localhost:4200/api/clints"

deleteClient(id){
    return this.http.delete(this.clientsUrl + "/" + id)

      }

so How to pass the same parameter to onConfirm method?

or What the best way to handle it?

you need to show a toast after the user details were deleted and you don't know how to pass the parameter to the "onConfirm" method, am i correct? — Hiras Haris
Thanks a lot for your support, actually I want to show a toast when user click the delete button <button class="btn btn-danger" (click)="showConfirm(rowData.id)"> ... then if click confirm button delete the same record, so my proplem how to pass the parameter(id) to onConfirm() method. — Mohamed Elkast

Hiras Haris Hiras Haris · Accepted Answer · 2019-11-29T06:49:06

you can do this, in your on confirm method

 `service.deleteClient(id).then((response: any) => {
         if (response.responseStatusId === 1) {
               //response.responseStatusId can be different
               //your toast method
                 }
                }`

and in your Service:

`deleteClient(id){
  const promise = new Promise((resolve,reject) => {
   return this.http.delete(this.clientsUrl + "/" + id).then((data: any) => {
     if (data) {
       resolve(data);
         } else{
            reject({});
            }
            }).catch((error:any) => {
               reject(error);
                });}
                 return promise;
                 }`

Delete record by using toast confirm in primeNG

1 Answers