启动可恢复 p-dialog 组件

Question

In my angular application I want to create a primeng p-dialog component which can be re-used across different component. Following is my implementation, but the p-dialog component is not displayed as a popup(as a dialog), it displays below the parent component.

log-component.html

<app-primeng-dialog 
    [isvisible]="showDialog">
</app-primeng-dialog> 
    

log-component.ts

showDialogWindow() 
{
this.showDialog  = true;
}

DialogComponent.ts

export class DialogComponent implements OnInit {
  @Input isvisible;
  ngOnInit() {
  }

}

DialogComponent.html

<div>
    <div *ngIf="isvisible">
        <div class="col-md-12 text-center p-1">
            <p-dialog [(visible)]="isvisible" [modal]="true" [responsive]="true"
                [style]="{width: '250px', minWidth: '100px', height:'350px', 'text-align': 'center'}" [minY]="70"
                [maximizable]="false" [baseZIndex]="10000" [closeOnEscape]="true" [closable]="false" position="top">
                <button type="button" pButton  label="Ok" class="ui-button"></button>
                &nbsp;
                <button type="button" pButton label="Cancel" class="ui-button"></button>

            </p-dialog>
        </div>
    </div>
</div>

Answer 1

I don't know why you are facing that kind of problem, but I have working example where your code works fine. Please check the link of stackblitz below=>
Stackblitz Demo Link .

Note: Do not set showDialog to false in DialogComponent . If you do that then pop up Modal will display once and then will not display again. That is why I have used @Output() deleteSelf = new EventEmitter<any>(); in the code.