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().
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;
}
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.
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.