Footer buttons on dynamic dialog

Question

I'm using a dynamic dialog and I want to have some buttons on footer, however it seems that only text is allowed for footer in this component.

                const ref = this.dialogService.open(TermsComponent, {
                    data: {
                        entity: response.IDEntity,
                        user: response.IDUser

                    },
                    header: this.translate.instant('resTerminosCond'),
                    width: '70%',
                    footer: `
                        <button mz-button class="btnLoginAgree" (click)="termsAccepted()" translate>
                            resAceptar
                        </button>
                        <button mz-button class="btnLoginDisagree" (click)="onAcceptTerms(false);" translate>
                            resRechazar
                        </button>`
                });

Any help is appreciated!

Answer 1

use like this for latest version PrimeNG p- instead of ui- it will work.

<div class="p-dialog-footer">

Answer 2

Currently primeng does not have a feature that allows that.

But you can do this: First set a styleClass for the dynamic Dialog.

this.ref = this.dialogService.open(TermsComponent, {
  data: {
    entity: response.IDEntity,
    user: response.IDUser

  },
  header: this.translate.instant('resTerminosCond'),
  width: '70%',
  styleClass: 'dynamicDialog',
});

Then in your app.component.scss remove the padding:

::ng-deep .dynamicDialog .p-dialog-content{
    padding: 0
}

Then in your TermsComponent.html add 2 classes. One for the content and another one for the footer.

 <div class="container">
      <!-- your content-->
 </div>

 
  <div class="footer">
    <button mz-button class="btnLoginAgree" (click)="termsAccepted()" translate>
      resAceptar
    </button>
    <button mz-button class="btnLoginDisagree" (click)="onAcceptTerms(false);" translate>
      resRechazar
    </button>
  </div>

And finally TermsComponent.scss:

:host {
  .container {
    padding: 3rem 1.5rem 2rem 1.5rem;
  }

  .footer {
    border-top: 0;
    background: white;
    padding: 1rem;
    text-align: right;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    display: flex;
    justify-content: flex-end;
  }

  .footer button {
    margin: 0 .5rem 0 0;
    width: auto;
  }
}

Answer 3

In order to add buttons in the DynamicDialog footer you can do the following using renderer2:

1. Define new custom type

   export type PrimeBtnObj = {text:string,icon:string,btnClass:string,callBack:(event:any) => void}

2. In Dialog component Define array of new type PrimeBtnObj

   btns: PrimeBtnObj[] = [
   {
     btnClass: 'p-button-text',
     icon: 'pi pi-check',
     text: 'OK',
     callBack: () => this.close() //function you want to call on click this button
   },
    {
     btnClass: 'p-button-rounded',
     icon: 'pi pi-times',
     text: 'Hello',
     callBack: () => this.ss() //function you want to call on click this button
    }
   ]
   

3. Wrap your content html of the dialog component inside div element with id e.g:'content'

4. Declare the following function in dialog component

   addBtnToDialogFooter(btns: PrimeBtnObj[]) {
   
   //get parent element of content
   const content = document.getElementById('content').parentNode.parentNode.parentNode
   const divFooter = this._renderer2.createElement('div')
   this._renderer2.setAttribute(divFooter, 'class', 'p-dialog-footer')
   
   for (let index = 0; index < btns.length; index++) {
     const element = btns[index];
     const button = this._renderer2.createElement('button')
     const spanIcon = this._renderer2.createElement('span')
     const spanText = this._renderer2.createElement('span')
     const textToSpan = this._renderer2.createText(element.text)
     this._renderer2.appendChild(spanText, textToSpan)
     this._renderer2.setAttribute(spanText, 'class', 'p-button-label')
     this._renderer2.setAttribute(spanIcon, 'class', `p-button-icon p-button-icon-left ${element.icon}`)
     this._renderer2.setAttribute(button, 'class', `p-ripple p-button ${element.btnClass}`)
     this._renderer2.setAttribute(button, 'type', 'button')
     this._renderer2.appendChild(button, spanIcon)
     this._renderer2.appendChild(button, spanText)
     this._renderer2.appendChild(divFooter, button)
     content.appendChild(divFooter)
     this._renderer2.listen(button, 'click', element.callBack)
   }
   

   }

5. call addBtnToDialogFooter(this.btns) inside ngOnInit()

Answer 4

For DynamicDialog, you can just use primeNg class "ui-dialog-footer" and place the buttons inside it.

<div class="ui-dialog-footer">
  <button mz-button class="btnLoginAgree" (click)="termsAccepted()" translate>
    resAceptar
  </button>
  <button mz-button class="btnLoginDisagree" (click)="onAcceptTerms(false);" translate>
    resRechazar
  </button>
</div>