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