I was trying to customize the PrimeNG ConfirmDialog from within the component.ts in my Angular application but the acceptLable, acceptVisible properties are not working. The icon, header, message, accept(), reject() etc all are working properly. Any clue for this ?
PrimeNG version: 4.1.1
Below are the codes:
component.html:
<p-confirmDialog closable="false" #cd>
<p-footer>
<button type="button" (click)="cd.accept()"></button>
<button type="button" (click)="cd.reject()"></button>
<p-footer>
</p-confirmDialog>
component.ts:
import {ConfirmationService} from 'primeng/primeng';
@Component({
..
providers: [ConfirmationService]
})
constructor(private confirmService: ConfirmationService){
this.notAllowedToLeave = true; /* Based upon this variable the confirmation dialog will display the Accept button i.e. "Yes, Sure!" */
...
}
this.confirmService.confirm({
message: 'Are you sure you want to exit?',
header: 'Warning: Quit Application',
icon: 'fa fa-exclamation-triangle',
accept: () => { /* My accept actions */ },
reject: () => { /* My reject actions */ },
acceptVisible: this.notAllowedToLeave ? false : true, /* No effect */
acceptLabel: 'Yes, Sure!', /* Giving Error: 'acceptLabel' does not exist in type 'Confirmation' */
rejectLabel: 'No, I Don't!' /* Giving Error: 'rejectLabel' does not exist in type 'Confirmation' */
});
You can directly specify it in HTML :
<p-confirmDialog acceptLabel="Yes, Sure!" rejectLabel="No, I Don't!"></p-confirmDialog>
See StackBlitz
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With