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.

Answer 1

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]
})

Answer 2

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