Angular 4 prime-ng customize confirmDialog body

user_1832932 0
Viewed 11936

I'm trying to customize the body of the confirmation dialog from prime ng https://www.primefaces.org/primeng/#/confirmdialog

using the ng-template approach but the html is not appearing here is my code:

<p-confirmDialog header="Enter PIN" icon="fa fa-question-circle" width="425" #cd>
  <ng-template pTemplate="body">
    <ul>
      <li>test</li>
    </ul>
  </ng-template>
    <p-footer>

        <button type="button" pButton icon="fa-close" label="No" (click)="cd.reject()"></button>
        <button type="button" pButton icon="fa-check" label="Yes" (click)="cd.accept()"></button>
    </p-footer>
</p-confirmDialog>

my call to the service

this.confirmationService.confirm({
        message: null,
        header: null,
        icon: null,
        accept: () => {
          this.checkCurrentCompliance('fp');
        }
    });

I don't know if my definition to the ptemplate is wrong by the way I tried to insert html using the message variable but it will not let me add inline styles.

primeng angular
2 Answers
Rather than cd.reject() call reject(id) or accept(id) in .html

In .ts
@ViewChild('')
confirmDialogComponent: ConfirmDialog;

accept(id){
 this.id = id;
 this.confirmDialogComponent.accept()
}

confirm() {
// use this.id
this.confirmationService.confirm({
   message: this.message,
   header: null,
   icon: null,
   accept: () => {
    this.checkCurrentCompliance('fp');
   }
 });
}
user_50140380
Related