title: Template parse errors when overriding DataTable component of primeNg
body: <p>I want to override the template of the <code>DataTable</code> component of <code>primeng</code> and this is how my code looks like:</p>
  
  <p><strong>my-datatable.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
  import { DataTable, DomHandler } from 'primeng/primeng';
  import { ObjectUtils } from '../../../../node_modules/primeng/components/utils/ObjectUtils'
  import { ColumnHeaders } from '../../../../node_modules/primeng/components/datatable/datatable'
  
  @Component({
    selector: 'my-datatable',
    templateUrl: './my-datatable.component.html',
    styleUrls: ['./my-datatable.component.scss']    
  })
  export class MyDatatableComponent extends DataTable {
  
      constructor(el: ElementRef, domHandler: DomHandler, renderer: Renderer2, changeDetector: ChangeDetectorRef, objectUtils: ObjectUtils) { 
          super(el, domHandler, renderer, changeDetector, objectUtils);
          console.log('MyDatatableComponent');
      }
  
  }
  </code></pre>
  
  <p><strong>my-datatable.component.html</strong>, this file has the same template as of the base component. Idea was to first run and then make modifications</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div [ngStyle]="style" [class]="styleClass" [style.width]="containerWidth" [ngClass]="{'ui-datatable ui-widget':true,'ui-datatable-reflow':responsive,'ui-datatable-stacked':stacked,'ui-datatable-resizable':resizableColumns,'ui-datatable-scrollable':scrollable}"&gt;
    &lt;div class="ui-datatable-loading ui-widget-overlay" *ngIf="loading"&gt;&lt;/div&gt;
    &lt;div class="ui-datatable-loading-content" *ngIf="loading"&gt;
      &lt;i class="fa fa-circle-o-notch fa-spin fa-2x"&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;div class="ui-datatable-header ui-widget-header" *ngIf="header"&gt;
      &lt;ng-content select="p-header"&gt;&lt;/ng-content&gt;
    &lt;/div&gt;
    &lt;p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui-paginator-bottom" (onPageChange)="paginate($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator &amp;&amp; paginatorPosition!='bottom' || paginatorPosition =='both'"&gt;&lt;/p-paginator&gt;
    &lt;div class="ui-datatable-tablewrapper" *ngIf="!scrollable"&gt;
      &lt;table [class]="tableStyleClass" [ngStyle]="tableStyle"&gt;
        &lt;thead class="ui-datatable-thead"&gt;
          &lt;tr *ngIf="!headerColumnGroup" class="ui-state-default" [pColumnHeaders]="columns"&gt;&lt;/tr&gt;
          &lt;ng-template [ngIf]="headerColumnGroup"&gt;
            &lt;tr *ngFor="let headerRow of headerColumnGroup.rows" class="ui-state-default" [pColumnHeaders]="headerRow.columns"&gt;&lt;/tr&gt;
          &lt;/ng-template&gt;
        &lt;/thead&gt;
        &lt;tfoot *ngIf="hasFooter()" class="ui-datatable-tfoot"&gt;
          &lt;tr *ngIf="!footerColumnGroup" class="ui-state-default" [pColumnFooters]="columns"&gt;&lt;/tr&gt;
          &lt;ng-template [ngIf]="footerColumnGroup"&gt;
            &lt;tr *ngFor="let footerRow of footerColumnGroup.rows" class="ui-state-default" [pColumnFooters]="footerRow.columns"&gt;&lt;/tr&gt;
          &lt;/ng-template&gt;
        &lt;/tfoot&gt;
        &lt;tbody [ngClass]="{'ui-datatable-data ui-widget-content': true, 'ui-datatable-hoverable-rows': (rowHover||selectionMode)}" [pTableBody]="columns"&gt;&lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  
    &lt;ng-template [ngIf]="scrollable"&gt;
      &lt;div class="ui-datatable-scrollable-wrapper ui-helper-clearfix" [ngClass]="{'max-height':scrollHeight}"&gt;
        &lt;div *ngIf="frozenColumns" [pScrollableView]="frozenColumns" frozen="true" [ngStyle]="{'width':this.frozenWidth}" class="ui-datatable-scrollable-view ui-datatable-frozen-view"&gt;&lt;/div&gt;
        &lt;div [pScrollableView]="scrollableColumns" [ngStyle]="{'width':this.unfrozenWidth, 'left': this.frozenWidth}" class="ui-datatable-scrollable-view" [virtualScroll]="virtualScroll" (onVirtualScroll)="onVirtualScroll($event)" [ngClass]="{'ui-datatable-unfrozen-view': frozenColumns}"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/ng-template&gt;
  
    &lt;p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui-paginator-bottom" [alwaysShow]="alwaysShowPaginator" (onPageChange)="paginate($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator &amp;&amp; paginatorPosition!='top' || paginatorPosition =='both'"&gt;&lt;/p-paginator&gt;
    &lt;div class="ui-datatable-footer ui-widget-header" *ngIf="footer"&gt;
      &lt;ng-content select="p-footer"&gt;&lt;/ng-content&gt;
    &lt;/div&gt;
  
    &lt;div class="ui-column-resizer-helper ui-state-highlight" style="display:none"&gt;&lt;/div&gt;
    &lt;span class="fa fa-arrow-down ui-datatable-reorder-indicator-up" style="position: absolute; display: none;"&gt;&lt;/span&gt;
    &lt;span class="fa fa-arrow-up ui-datatable-reorder-indicator-down" style="position: absolute; display: none;"&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also I have added this new component in the <code>declarations</code> array in the <code>app.module.ts</code> file. So, I know that it is being included, which is the reason why I am getting a parse error.</p>
  
  <p>The errors which I encounter in the console is:</p>
  
  <pre><code>Unhandled Promise rejection: Template parse errors:
  Can't bind to 'pColumnHeaders' since it isn't a known property of 'tr'. ("ass="ui-datatable-thead"&gt;
                    &lt;tr *ngIf="!headerColumnGroup" class="ui-state-default" [ERROR -&gt;][pColumnHeaders]="columns"&gt;&lt;/tr&gt;
                    &lt;ng-template [ngIf]="headerColumnGroup"&gt;
           "): ng:///AppModule/CsxDatatableComponent.html@14:74
  Can't bind to 'pColumnHeaders' since it isn't a known property of 'tr'. ("                      &lt;tr *ngFor="let headerRow of headerColumnGroup.rows" class="ui-state-default" [ERROR -&gt;][pColumnHeaders]="headerRow.columns"&gt;&lt;/tr&gt;
                    &lt;/ng-template&gt;
                &lt;/thead&gt;
  "): ng:///AppModule/CsxDatatableComponent.html@16:100
  Can't bind to 'pColumnFooters' since it isn't a known property of 'tr'. ("ass="ui-datatable-tfoot"&gt;
                    &lt;tr *ngIf="!footerColumnGroup" class="ui-state-default" [ERROR -&gt;][pColumnFooters]="columns"&gt;&lt;/tr&gt;
                    &lt;ng-template [ngIf]="footerColumnGroup"&gt;
           "): ng:///AppModule/CsxDatatableComponent.html@20:74
  Can't bind to 'pColumnFooters' since it isn't a known property of 'tr'. ("                      &lt;tr *ngFor="let footerRow of footerColumnGroup.rows" class="ui-state-default" [ERROR -&gt;][pColumnFooters]="footerRow.columns"&gt;&lt;/tr&gt;
                    &lt;/ng-template&gt;
                &lt;/tfoot&gt;
  "): ng:///AppModule/CsxDatatableComponent.html@22:100
  Can't bind to 'pTableBody' since it isn't a known property of 'tbody'. ("datatable-data ui-widget-content': true, 'ui-datatable-hoverable-rows': (rowHover||selectionMode)}" [ERROR -&gt;][pTableBody]="columns"&gt;&lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;
  "): ng:///AppModule/CsxDatatableComponent.html@25:137
  Can't bind to 'pScrollableView' since it isn't a known property of 'div'. ("-helper-clearfix" [ngClass]="{'max-height':scrollHeight}"&gt;
                &lt;div *ngIf="frozenColumns" [ERROR -&gt;][pScrollableView]="frozenColumns" frozen="true" 
                    [ngStyle]="{'width':this.frozenWid"): ng:///AppModule/CsxDatatableComponent.html@31:41
  Can't bind to 'pScrollableView' since it isn't a known property of 'div'. ("ozenWidth}" class="ui-datatable-scrollable-view ui-datatable-frozen-view"&gt;&lt;/div&gt;
                &lt;div [ERROR -&gt;][pScrollableView]="scrollableColumns" [ngStyle]="{'width':this.unfrozenWidth, 'left': this.frozenWidt"): ng:///AppModule/CsxDatatableComponent.html@33:19
  Can't bind to 'virtualScroll' since it isn't a known property of 'div'. ("is.unfrozenWidth, 'left': this.frozenWidth}"
                    class="ui-datatable-scrollable-view" [ERROR -&gt;][virtualScroll]="virtualScroll" (onVirtualScroll)="onVirtualScroll($event)"
                    [ngClas"): ng:///AppModule/CsxDatatableComponent.html@34:55 ; Zone: &lt;root&gt; ; Task: Promise.then ;
  </code></pre>
  
  <p>pColumnHeaders, pColumnFooters are all components which are already exported via the <code>DataTableModule</code>. I am unable to figure out how to make these parsing errors go away, I am sure I am missing something.</p>
  
  <p>Any help is much appreciated.</p>
  
  <p><strong>Update:</strong> 
  This is how my app.module.ts looks. I have the <code>DataTableModule</code>, <code>BrowserModule</code> and <code>FormsModule</code> imported. I am able to use the standard primeNg datatable component on my views, just not able to override it.</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  
  /* PRIME NG */
  import { 
            AutoCompleteModule,
            PanelMenuModule, 
            MenuItem, 
            MenubarModule, 
            OverlayPanelModule, 
            TabViewModule, 
            ButtonModule, 
            CodeHighlighterModule,
            DropdownModule,
            DialogModule, 
            MultiSelectModule ,
            InputTextModule,
            TooltipModule,
            CheckboxModule,
            SplitButtonModule,
            RadioButtonModule,
            MessagesModule,
            ConfirmDialogModule,
            ConfirmationService,
            AccordionModule,
            PanelModule,
            FieldsetModule,
            CalendarModule,
            DataTableModule,
            MenuModule,
            BreadcrumbModule,
            TreeModule,
            DomHandler,
            ChartModule
          } from 'primeng/primeng';
  import { ObjectUtils } from '../../node_modules/primeng/components/utils/ObjectUtils';
  
  
  /* APP-SPECIFIC */
  import { WindowRef } from './windowref';
  import { routing } from './app.routing';
  import { MyDatatableComponent } from './components/my-datatable.component';
  
  
  @NgModule({
    declarations: [ 
      DatatableComponent,   
      ChartsGraphsComponent,
      CsxDatatableComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      routing,
      AutoCompleteModule,
      BrowserAnimationsModule,
      PanelMenuModule,
      MenubarModule,
      OverlayPanelModule, 
      TabViewModule,
      ButtonModule,
      CodeHighlighterModule,
      DropdownModule,
      MultiSelectModule,
      DialogModule,
      InputTextModule,
      TooltipModule,
      CheckboxModule,
      SplitButtonModule,
      RadioButtonModule,
      MessagesModule,
      ConfirmDialogModule,
      AccordionModule,
      PanelModule,
      FieldsetModule,
      CalendarModule,
      DataTableModule,
      MenuModule,
      BreadcrumbModule,
      TreeModule,
      ChartModule
    ],
    providers: [
      DomHandler,
      ObjectUtils
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>