PrimeNG p-footer is not a known element error in angular 2

Question

I am new on using PrimeNG and I need a confirmation dialog box. I read the documentation about confirmation dialog and implemented it on my component.

my-component.ts

import { ConfirmDialogModule, ConfirmationService } from 'primeng/primeng';

my-component.html

 <p-confirmDialog header="Order Confirmation" icon="fa fa-question-circle" width="425" #cd>
     <p-footer>
        <button type="button" pButton icon="fa-close" label="No" (click)="cd.reject()"></button>
        <button type="button" pButton icon="fa-check" label="Yes" (click)="cd.accept()"></button>
     </p-footer>
 </p-confirmDialog>

app.module.ts

import { ConfirmDialogModule, ConfirmationService } from 'primeng/primeng'; 

@NgModule({
  declarations: [
  ],
  imports: [
    BrowserModule,
    ConfirmDialogModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [ConfirmationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Anything that I missed that triggers the error? Please enlighten me.

You may need to update PrimeNG to get p-header/p-footer rather than just header/footer. See: [Issue 1710](https://github.com/primefaces/primeng/issues/1710). — David C, Feb 11 '17 at 08:22

score 13 · Accepted Answer · answered Jan 30 '17 at 02:21

Got it! I just need to import SharedModule in order to use it.

import { ConfirmDialogModule, ConfirmationService, SharedModule } from 'primeng/primeng';

then include it in @NgModule

@NgModule({
  declarations: [
  ],
  imports: [
    ConfirmDialogModule,
    SharedModule
  ],
  providers: [ConfirmationService],
  bootstrap: [AppComponent]
})

score 3 · Answer 2 · edited Feb 02 '17 at 10:05

3

Because of header and footer are reserved PrimeNG changed those to p-header and p-footer and yes, they are inside of the SharedModule.

edited Feb 02 '17 at 10:05

Onur Senture

519
5
16

answered Jan 31 '17 at 08:08

Mertcan Diken

14,483
2
26
33

PrimeNG p-footer is not a known element error in angular 2

2 Answers2