primeng confirmation service

Question

I have a component which uses confirmation service, as follows

@Component({
    moduleId: module.id,
    templateUrl: 'account-list.component.html',
    providers: [AccountService],
    selector: 'account-list'
}).....

deleteAccount(Account: Account) {
    this.confirmationService.confirm({
        header: 'Delete Confirmation', message: 'Are you sure that you want to delete this account?',
        icon: 'fa fa-trash',
        accept: () => {
            this.AccountService.deleteAccount(Account.account_id).subscribe(
                res => {
                    let index: number = this.Accounts.findIndex(n => n.account_id === Account.mc_account_id);
                    if (~index) {
                        this.Accounts.splice(index, 1);
                    }
                    this.msgs.push({ severity: 'Info', summary: 'The account is deleted' });
                },
                err => {
                    this.msgs.push({ severity: 'Error', summary: err.message });
                }
            );

        }
    });
}

This component works fine as stand alone. When using this component as a child component, the confirmation service is triggered two times. I.e. when I would like to delete an object i need to click more than one time the accept or reject button.

I use this component in rowexpantion in data table component as follows:

<template let-parent pTemplate="rowexpansion">
        <div class="outer" *ngIf="parent">
            <div class="inner">
                <account-list [parentId]="parent.parent_id"> </account-list>

            </div>
        </div>
    </template> 

In this example my component is used to show the accounts details for a Datatable for the parent component, each time I expand a row of the parent table, then I need to click one more time the accept or reject buttons. Regards

Answer 1

Based on primeng Docs

key: Optional key to match the key of confirm object, necessary to use when component tree has multiple confirm dialogs.

Since I am using a tree of nested component , I needed to add a key for each confirmation service as follows in the html template

<p-confirmDialog key="account"></p-confirmDialog>

in the ts code I need also to specify the key as follows:

 this.confirmationService.confirm({
                header: 'Delete Confirmation',
                key:'account';