Footer in Dynamic Dialog

[uguresmer]

Is there a way to add footer with buttons in PrimeNg Dynamic Dialog.

[cetincakiroglu]

Hi,

Unfortunately, you can only add the footer in string format to the dynamic dialog. For now, the dynamic dialog doesn't have templating support. However, you can achieve a similar thing by creating your own custom dynamic dialog with Dialog component. The process would be similar to this:

1-) Create a separate component
2-) In here by using dialog component and templating feature, you can implement desired customizations.
3-) Dynamically create this component by using Angular's viewContainerRef
4-) Create a service for injection if you want to subscribe open/close or want to use any events.

[kashcode]

Is this still relevant because of https://primeng.org/dynamicdialog#api.dynamicdialogconfig.props.templates or this is something else?

[Rakasch]

I solved this for me with Teleport.
I use primevue, but the solution is based on vue.js Teleport only, so you should be able to adopt the solution.
https://github.com/orgs/primefaces/discussions/72

[kashcode]

How can I get access from footer component to main component data, for example if form is not valid disable buttons in footer component. Can't figure out how to do that.

[cetincakiroglu]

DynamicDialog supports templating now with sub-components. Please see the example: https://primeng.org/dynamicdialog#example

[Et3rnal]

Nice, but it should take a template, not another component!

[webmatth]

I've found a way:

DynamicDialogComponent.prototype.loadChildComponent = function (componentType: Type<any>) {
   let viewContainerRef = this.insertionPoint?.viewContainerRef;
   viewContainerRef?.clear();
   this.componentRef = viewContainerRef?.createComponent(componentType);
   this.dialogRef.onChildComponentLoaded.next(this.componentRef!.instance);

   const footerInstance: ElementRef<HTMLDivElement> = this.componentRef!.instance.footerInstance;
   if (footerInstance) {
     const dialogContent = this.contentViewChild.nativeElement;
     const parentNode = dialogContent.parentNode;
     if (parentNode) {
       this.renderer.insertBefore(parentNode, footerInstance.nativeElement, dialogContent.nextSibling);
     }
   }
 }; 

In your component.ts :

protected ref = inject(DynamicDialogRef, {optional: true});
@ViewChild('footer', {static: true}) footerInstance!: ElementRef<HTMLDivElement>; 

In your component.html

<div #footer class="p-dialog-footer">
  <p-footer>
    <p-button  label="save" />
    <p-button label="close" (click)="ref?.close()" />
  </p-footer>
</div>