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: `
                        
                        `
                });

Any help is appreciated!

user_1787828 · Answer

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

user_5404682 · Answer

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.

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;
  }
}

user_19101349 · Answer

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

Define new custom type

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

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
 }
]

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

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)
}

}

call addBtnToDialogFooter(this.btns) inside ngOnInit()

user_10546462 · Answer

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

Footer buttons on dynamic dialog

4 Answers