primeng - How to dynamically change the header of the p-dialog of PRIMNG in angular

Question

I am using primeng Dialog box and wanted to change the header of the dialog dynamically.

for example - if the user opens to Add user show the title as Add user if open to edit change the title to Edit user.

I have tried using interpolation as header = {{ formTitle }} but it not taking. As formTitle is a input variable that holds a value. I want to set this variable in the header.

This is the tag where we have a header tag to have dynamic text -

<p-dialog header="Header" [(visible)]="displayBasic" [style]="{width: '50vw'}" [baseZIndex]="10000">

What method should I use to change the header of p-dialog dynamically?

question from:https://stackoverflow.com/questions/65882964/how-to-dynamically-change-the-header-of-the-p-dialog-of-primng-in-angular

Answer 1

Use a nested build-in element of P-dialog i.e.

<p-dialog>
   <p-header> {{ formTitle }} </p-header>

   Body content ...
   <p-footer> Content ... </p-footer>
</p-dialog>

Added body and footer just for completeness purposes.