Set PrimeNG confirm message from template

Question

I am using a ConfirmDialog component from PrimeNg Collection. I can set my message as this:

this.confirmationService.confirm({
      message: 'my message',
    });

It works but the problem is that it gets messy if I need a big set of tags with other components in there. I want to write my message in an HTML template alongside p-confirmDialog tag with Angular's directives and components embedded right into it.

How do I achieve this?

stackoverflow.com/a/45789799/8468804 Maybe implement something like my answer in this post as a work-around. Mind you but if you want to achieve a template for a variable/property is going to be messy either way. — Chau Tran
I don't want hacks and workarounds. If Angular is so great everything should be possible to do in a right way. — Gherman

Chau Tran Chau Tran · Accepted Answer · 2017-10-06T16:45:08

Here's another approach and I think this is a more appropriate way to do it.

HTML

<p-confirmDialog appendTo="body">
<ng-template pTemplate="body">
    <span class="ui-confirmdialog-message">{{message}}</span>"
</ng-template>

TS

    ...
constructor(private confirmationService: ConfirmationService) {}

private message = `Do you want to change your status to <span style="color:red">inactive</span>` //your template html;
...
this.confirmationService.confirm({
  header: "Some header",
  message: this.message,
  accept: () => {
    //Do something
  }
});

You can always have a dedicated Service to call ConfirmationService and pass in the message as you wish.

Set PrimeNG confirm message from template

1 Answers