CODEWITHSUNDEEP
angularprimeng
Manzer Hashmi
Manzer Hashmi

Reputation: 73

How to Make a Button in the Header of Dialog Component in PRIMENG in Angular4

I want to put an button in header of the dialog window in primeng. The link for the code is https://www.primefaces.org/primeng/#/dialog.

The requirement is want to add two buttons(with image or any icon as calculator and quesstion mark) in the right side of top header and these buttons should call a method abc().

Code looks like:-

model.component.html
---------------------
<p-dialog header="top header title pass here" [(visible)]="display" modal="modal" 
draggable="true" dismissableMask="true" positionTop="50" padding="0px" width="1200" 
height="350" [responsive]="true">
   // here two buttons btn1 and btn2(with icons) next to 'fa fa-fw fa-close' icon.
    <p>The stor.</p>
    <p-footer>
        <button type="button" pButton icon="fa-check" (click)="display=false" 
         label="Yes">hghk</button>
    </p-footer>
</p-dialog>

 <button type="button" (click)="showDialog()" pButton icon="fa-external-link-square" 
  label="Show">Lead</button>

model.component.ts
---------------------
  display = false;
  showDialog() {
    this.display = true;
  }

Upvotes: 2

Views: 11523

Answers (3)

Amar Patil
Amar Patil

Reputation: 31

This worked for me. Try


<ng-template pTemplate="header">
    <span style="width:100%">
        <p-header>
            <div style='display: flex; justify-content: space-between;'>
            <div style='justify-content: flex-start;'>
                 Your Title
            </div>
            <div style='justify-content: flex-end;'>
            <button type="button" label="Cancel"></button>
            </div>
            </div>
        </p-header>
    </span>
</ng-template>

Upvotes: 0

JuanDM
JuanDM

Reputation: 1330

Use the <p-header> tag:

<p-dialog [(visible)]="display">
    <p-header>
        Header content here <button type="button" (click)="headerBtn()" pButton icon="fa fa-address-book" label="header"></button>
    </p-header>

    Modal Content

    <p-footer>
        <button type="button" pButton icon="fa-check" label="Yes"></button>
    </p-footer>
</p-dialog>

<button type="button" pButton label="modal" (click)="displayDialog()"></button>

I made a plunker showing how to put a button in the modal header:

Upvotes: 1

Greg Kosmo
Greg Kosmo

Reputation: 76

You need to use the p-header attribute of the p-dialog like so:

<p-dialog [(visible)]="display" modal="modal" draggable="true" dismissableMask="true" positionTop="50" padding="0px" width="1200" height="350" [responsive]="true">
    <p-header>
        top header title pass here
        <button type="button" pButton icon="fa-calculator" (click)="abc()"></button>
        <button type="button" pButton icon="fa-question" (click)="abc()"></button>
    </p-header>

    <p>The stor.</p>

    <p-footer>
        <button type="button" pButton icon="fa-check" (click)="display=false" label="Yes">hghk</button>
    </p-footer>
</p-dialog>

You should then be able to add css that floats the buttons to the right of the header.

Upvotes: 6

Related Questions