Angular 4 prime-ng customize confirmDialog body

Question

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.

Answer 1

Try this :

<p-confirmDialog header="Enter PIN" icon="fa fa-question-circle" width="425" #cd>
    <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>

component.ts

export class HomeComponent implements OnInit {

    message: any;

    constructor(private confirmationService: ConfirmationService) { }

    ngOnInit() {
        this.message = document.getElementsByClassName('ui-confirmdialog-message')[0].innerHTML = "<ul><li>test</li></ul>";
    }

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

}