CODEWITHSUNDEEP
angularprimeng
naoru
naoru

Reputation: 2227

Angular 4 prime-ng customize confirmDialog body

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.

Upvotes: 4

Views: 13373

Answers (2)

Meghal Patel
Meghal Patel

Reputation: 1

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');
   }
 });
}

Upvotes: 0

Chandru
Chandru

Reputation: 11184

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');
            }
        });
    }

}

Upvotes: 4

Related Questions