Dialog component is used to display the information in an overlay window.
Dialog is used as an information container that displays content in popup mode within the viewport of the webpage.
Here a Basic dialog is shown. The dialog can be moved within the page.
The dialog has a close button as well and can be closed with the 'x' icon.
The Dialog component visibility is controlled with the visible property. The visible property value is set as show here.
The code example in this post is tested in Angular 8 with PrimeNG 8. This basic dialog will work in PrimeNG 11 also and Angular version should be compatible with PrimeNG
Dialog Component
import { Component } from '@angular/core';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.scss']
})
export class DialogComponent {
show: boolean = false;
showDialog() {
this.show = true;
}
}
Dialog Component HTML
<p-dialog header="Dialog Title" [(visible)]="show" [style]="{width: '40vw'}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas vitae maximus tellus. Praesent laoreet ac magna eu
convallis. Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nulla pellentesque
augue at lobortis ornare. Integer tristique, dolor tempor dictum sodales,
nisl nulla posuere ex, non lacinia orci
elit in sapien. Aenean vel diam vitae risus dignissim tincidunt.
Nam nibh risus, feugiat at massa eu, pretium
vulputate purus. Vivamus sollicitudin placerat feugiat.
Proin sodales ultrices sagittis. Sed consequat metus neque,
non aliquet odio blandit sit amet. Nullam a tortor dignissim,
fringilla felis a, pulvinar ante.
</p-dialog>
<button type="button" (click)="showDialog()" icon="pi pi-info-circle" label="Show">
Show Dialog
</button>
Import DialogModule in AppModule
import { DialogModule } from 'primeng/dialog';
Also, add a route for the dialog component. On navigating to http://localhost:4200/dialog, the Show Dialog button will be shown.
AppRoutingModule
const routes: Routes = [
{ path: 'dialog', component: DialogComponent}
];
On clicking the Show Dialog Button, the dialog visible property show will be set to true.
Troubleshooting
Can't bind to 'visible' since it isn't a known property of 'p-dialog'.
If DialogModule is not imported in AppModule, it will throw the above error.