Dialog e Modal
Dialog Base (p-dialog)
Contenuto della dialog. Qui puoi inserire qualsiasi contenuto: testo, form, tabelle, ecc.
<p-dialog header="Titolo" [(visible)]="showDialog" [modal]="true" [style]="{ width: '500px' }">
<p>Contenuto</p>
<ng-template pTemplate="footer">
<p-button label="Annulla" severity="secondary" [outlined]="true" size="small" (onClick)="showDialog = false"></p-button>
<p-button label="Conferma" icon="pi pi-check" severity="primary" size="small" (onClick)="onConfirm()"></p-button>
</ng-template>
</p-dialog>
Confirm Dialog (conferma eliminazione)
// Nel component:
this.confirmationService.confirm({
message: 'Sei sicuro di voler eliminare questo elemento?',
header: 'Conferma Eliminazione',
icon: 'pi pi-exclamation-triangle',
accept: () => {
// logica eliminazione
},
});
// Nel template:
<p-confirmDialog></p-confirmDialog>
Dialog con Form
<p-dialog header="Nuovo Elemento" [(visible)]="showFormDialog" [modal]="true" [style]="{ width: '550px' }">
<div class="row">
<div class="col-12 col-sm-6 flex flex-col gap-1 mb-3">
<label class="kcs-form-label">Nome</label>
<input class="kcs-inputtext kcs-component" [(ngModel)]="name" />
</div>
</div>
<ng-template pTemplate="footer">
<p-button label="Annulla" severity="secondary" [outlined]="true" (onClick)="close()"></p-button>
<p-button label="Salva" icon="pi pi-save" severity="primary" (onClick)="save()"></p-button>
</ng-template>
</p-dialog>