I implemented a PrimeNG confirmation dialog based on the example from their official documentation:
component.html
<p-confirmDialog appendTo="body" #cd>
<p-footer>
<button type="button" pButton class="btn btn-primary btn-normal mr-4" label="Print or save" (click)="cd.accept()"></button>
<button type="button" pButton class="btn btn-default btn-normal ml-2" label="Skip" (click)="cd.reject()"></button>
</p-footer>
</p-confirmDialog>
component.ts:
import { ConfirmationService } from 'primeng/api';
@Component({
selector: 'xxx',
templateUrl: './xxx.component.html',
styleUrls: ['./xxx.component.scss'],
providers: [ConfirmationService]
})
constructor(private _confirmationService: ConfirmationService) { }
// I am trying to simplify the code
// this method is called successfully
this._confirmationService.confirm({
message: 'Please print or save the confirmation details before continuing.',
header: 'Confirmation details',
accept: () => {
this.navigatetoPaymentApp();
}
});
angular.json:
"styles": [
"node_modules/primeng/resources/primeng.min.css",
"src/styles/main.scss"
],
app.module.ts:
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
//...
],
//...
})
export class AppModule { }
After implementing the dialog, this is the outcome I achieved:
https://i.sstatic.net/B0mB5.jpg
Here is the expected result for comparison: https://i.sstatic.net/HsjAB.jpg
Some issues I encountered: 1. Missing default styling from PrimeNG (e.g. darkened background) 2. Absence of a close window cross icon
Is there anything else that needs to be addressed or any additional ideas?
Thank you in advance!