Search code examples
javascriptangulartypescriptprimeng

Open fullscreen modals using primeng dynamic dialog

I am using the PrimeNg modal extension for displaying modal popups in one of the Angular webapp I am working on. I am passing a component to the modal service as shown in the following code:

const ref = this.dialogService.open(LogsComponent, {
            data: {
                releaseID:row.release_id
            },
            header:'Migration Logs',
            width:'100%', 
            height:'100%'
        });

I am getting the ID that I passed and is able to display a table in the modal. Now the problem is even if I give 100% width and height, the modal is not appearing as full screen. I would like to have the modal maximized as it is for the PrimeNg Dialog.

Solution

  • For primeng ~13 using the p-dialog tag, you can do the following:

    <p-dialog #dialog (onShow)="dialog.maximize()">dialog text</p-dialog>