9

I want to display Add and Delete button in the panel header. Below code displays button with no fa-icon and no label

<p-panel>
  <p-header>
   <div>
     Registration Form
     <button type="button" pButton icon="fa-plus" style="float:right" label="Add">
     </button>
   </div>
  </p-header>
</p-panel>
Jan69
  • 1,109
  • 5
  • 25
  • 48

6 Answers6

16

Your code is working fine here.

Have you imported font-awesome to your application? If not, add this in your index.html within the <head></head> tag.

<head> 
...
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 </head>

Also, you will need to import ButtonModule, PanelModule to your application.

import {ButtonModule, PanelModule} from 'primeng';

@NgModule({

  imports: [
    ...
    ButtonModule,
    PanelModule,
    ...
  ],
  ...
})
Nehal
  • 13,130
  • 4
  • 43
  • 59
  • You code is fine. It worked in my plunker. It has to be some sort of configuration problem. Do you see the panel on screen? – Nehal Jul 27 '17 at 21:29
  • Yes i am able to see the panel with the header. Button is displaying blank. – Jan69 Jul 27 '17 at 21:30
  • Can you add your `app.module.ts` in your question please? – Nehal Jul 27 '17 at 21:31
  • Added app.module.ts – Jan69 Jul 27 '17 at 21:39
  • I don't see the `import {ButtonModule, PanelModule} from 'primeng';` statement in your `app.module.ts`. I see them inside `imports` but they wont work without the import statement. Also, you mentioned in the question that pButton is working in `JobCleanupComponent`. Are you importing `primeng` modules in that component again? – Nehal Jul 27 '17 at 21:44
  • Its there in the import statement import { DataTableModule , ButtonModule,DialogModule,InputTextareaModule,PanelModule,SharedModule} from 'primeng/primeng'; I am not importing anything in the JobCleanupComponent. – Jan69 Jul 27 '17 at 21:47
  • Thank you for importing `ButtonModule` – TiyebM Apr 17 '19 at 15:45
4

After importing the BrowserAnimationsModule , primeng Buttons are displaying inside the panel.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
Jan69
  • 1,109
  • 5
  • 25
  • 48
2

if you are working with angular2/4 you'll need to add the following import to your app.module.ts

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
Firman Drage
  • 21
  • 1
  • 1
    yes but not necessarily app.module.ts - needs to be added to module in which it is being used - +1 – danday74 May 22 '18 at 11:49
0

You have some structure errors in your example code. I've created a plnkr for you.

http://plnkr.co/edit/myrBq9tv4iNRNd6v6bhT?p=preview

<p-panel>
  <p-header>
    <div>Registration Form
      <button type="button" pButton icon="fa-plus" style="float:right" label="Add"></button>
      <button type="button" class="ui-button-danger" pButton icon="fa-minus" style="float:right" label="Delete"></button>
    </div>
  </p-header>
</p-panel>
BillF
  • 804
  • 10
  • 20
0

Changing from pi-close to fa-close worked for me.

Seems that there are new and old font awesome icons. They have to be used like this:

class="pi pi-xxx" or class="fa fa-xxx"
makkasi
  • 6,328
  • 4
  • 45
  • 60
0

You cannot use icon and label at the same time.Try below <button type="button" pButton icon="fa-plus" style="float:right"></button> and importing ButtonModule from primeng/button is a must

Meghana
  • 1