How to get the confirmation service of primeng wait for the approval or denial of the user?

Question

How can I make the primng confirmation service behave equal to the browser native confirm?

When a user clicks on a button, I need under certain conditions to request their confirmation to proceed, in case of denying it, exit the method.

The following is an example using the primeng confirmation service. The problem is that the last line of the method that calls openFile is executed without waiting for user approval.

confirm(): void {
  if (this.condition) {
    this.confirmationService.confirm({
      message: 'Are you sure that you want to proceed?',
      header: 'Confirmation',
      icon: 'pi pi-exclamation-triangle',
      accept: () => {
        this.openFile();
        this.messageService.add({
          severity: 'info',
          summary: 'Confirmed',
          detail: 'You have accepted'
        });

        return;
      },
      reject: () => {
        return;
      }
    });
  }

  this.openFile();
}

On the other hand by implementing the same logic using the browser native confirmation. It works as expected, so that in the proper condition it will wait for the user's confirmation

confirm1(): void {
  if (this.condition) {
    const result = confirm('Are you sure that you want to proceed?');

    if (result) {
      this.openFile();

      return;
    } else {
      return;
    }
  }

  this.openFile();
}

The openFile methodo has a simple console log

openFile(): void {
  console.log('Some file');
}

How to get the confirmation service of primeng wait for the approval or denial of the user?

You can interact with an example of the behavior described in this repository https://github.com/ilmoralito/sample-primeng-confirmation-service-vs-native-confirmation

score 1 · Accepted Answer · answered Dec 10 '20 at 20:36

you can create a service as layer above primeng confirm service then use a promise as return type of custom confirm method that call primeng confirm service , the promise resolve as true for accept and false in case of reject.

confirm service

@Injectable({
  providedIn: "root"
})
export class ConfirmService {
  constructor(private confirmationService: ConfirmationService) {}

  confirm({
    message = "Are you sure that you want to proceed?",
    header = "Confirmation",
    icon = "pi pi-exclamation-triangle"
  } = {}): Promise<boolean> {
    return new Promise(resolve => {
      console.log(
        this.confirmationService.confirm({
          message,
          header,
          icon,
          accept: () => {
            resolve(true);
          },
          reject: () => {
            resolve(false);
          }
        })
      );
    });
  }
}

we can use async/await because confirm method return promise

export class AppComponent {
  msgs: Message[] = [];

  constructor(private confirmService: ConfirmService) {}

  async confirm() { 
    if (await this.confirmService.confirm())
      this.msgs = [
        { severity: "info", summary: "Confirmed", detail: "You have accepted" }
      ];
    else {
      this.msgs = [
        { severity: "info", summary: "Rejected", detail: "You have rejected" }
      ];
    }
  }

}

stackblitz demo

How to get the confirmation service of primeng wait for the approval or denial of the user?

1 Answers1

Linked