How to extract p-dialog content in external component

franco.whyline · 03 Sep 2021, 17:41

Hi guys,
I am doing a refactor on my app and I want to have the p-dialog in a component but the content of (including header and footer) of the p-dialog in another component.

Code: Select all

<p-dialog
      [(visible)]="show"
      [style]="{ width: '500px' }"
      [draggable]="false"
      [modal]="true"
>
      <app-tag-form></app-tag-form>
</p-dialog>

Inside of my app-tag-form I have:

Code: Select all

<ng-template pTemplate="header">
    <h1 translate>PAGES.TAGS.TITLE</h1>
</ng-template>

<form novalidate autocomplete="off" [formGroup]="form" #tagForm="ngForm">
...
</form>

<ng-template pTemplate="footer">
  <button
    pButton
    label="{{ 'PAGES.TAGS.SAVE' | translate }}"
    (click)="save()"
    [disabled]="form.invalid"
    pRipple
  ></button>
</ng-template>

But when I open the p-dialog, I can only see the form, the header and footer is not showing, this is the result:

How can I make it work?
Thanks!

franco.whyline · 10 Sep 2021, 16:29

Anyone can help with this? I am really blocked whit this issue!

Andrus8 · 14 Sep 2021, 12:22

Use Bootstrap's JavaScript modal plugin to add dialogs to your site for ... and remove scroll from the <body> so that modal content scrolls instead.
L Brands Aces

How to extract p-dialog content in external component

Who is online