Template parsing errors when overriding a DataTable in PrimeNg

Question

Template parsing errors when overriding a DataTable in PrimeNg

I want to override the DataTablecomponent template primeng, and here is what my code looks like:

my-datatable.component.ts

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');
    }

}

my-datatable.component.html , this file has the same template as the base component. The idea was to start first and then make changes.

<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}">
  <div class="ui-datatable-loading ui-widget-overlay" *ngIf="loading"></div>
  <div class="ui-datatable-loading-content" *ngIf="loading">
    <i class="fa fa-circle-o-notch fa-spin fa-2x"></i>
  </div>
  <div class="ui-datatable-header ui-widget-header" *ngIf="header">
    <ng-content select="p-header"></ng-content>
  </div>
  <p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui-paginator-bottom" (onPageChange)="paginate($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && paginatorPosition!='bottom' || paginatorPosition =='both'"></p-paginator>
  <div class="ui-datatable-tablewrapper" *ngIf="!scrollable">
    <table [class]="tableStyleClass" [ngStyle]="tableStyle">
      <thead class="ui-datatable-thead">
        <tr *ngIf="!headerColumnGroup" class="ui-state-default" [pColumnHeaders]="columns"></tr>
        <ng-template [ngIf]="headerColumnGroup">
          <tr *ngFor="let headerRow of headerColumnGroup.rows" class="ui-state-default" [pColumnHeaders]="headerRow.columns"></tr>
        </ng-template>
      </thead>
      <tfoot *ngIf="hasFooter()" class="ui-datatable-tfoot">
        <tr *ngIf="!footerColumnGroup" class="ui-state-default" [pColumnFooters]="columns"></tr>
        <ng-template [ngIf]="footerColumnGroup">
          <tr *ngFor="let footerRow of footerColumnGroup.rows" class="ui-state-default" [pColumnFooters]="footerRow.columns"></tr>
        </ng-template>
      </tfoot>
      <tbody [ngClass]="{'ui-datatable-data ui-widget-content': true, 'ui-datatable-hoverable-rows': (rowHover||selectionMode)}" [pTableBody]="columns"></tbody>
    </table>
  </div>

  <ng-template [ngIf]="scrollable">
    <div class="ui-datatable-scrollable-wrapper ui-helper-clearfix" [ngClass]="{'max-height':scrollHeight}">
      <div *ngIf="frozenColumns" [pScrollableView]="frozenColumns" frozen="true" [ngStyle]="{'width':this.frozenWidth}" class="ui-datatable-scrollable-view ui-datatable-frozen-view"></div>
      <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}"></div>
    </div>
  </ng-template>

  <p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui-paginator-bottom" [alwaysShow]="alwaysShowPaginator" (onPageChange)="paginate($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && paginatorPosition!='top' || paginatorPosition =='both'"></p-paginator>
  <div class="ui-datatable-footer ui-widget-header" *ngIf="footer">
    <ng-content select="p-footer"></ng-content>
  </div>

  <div class="ui-column-resizer-helper ui-state-highlight" style="display:none"></div>
  <span class="fa fa-arrow-down ui-datatable-reorder-indicator-up" style="position: absolute; display: none;"></span>
  <span class="fa fa-arrow-up ui-datatable-reorder-indicator-down" style="position: absolute; display: none;"></span>
</div>

Run code

I also added this new component to the array declarationsin the file app.module.ts. So, I know that it is turned on, so I get a parsing error.

Errors that I encounter in the console:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'pColumnHeaders' since it isn't a known property of 'tr'. ("ass="ui-datatable-thead">
                  <tr *ngIf="!headerColumnGroup" class="ui-state-default" [ERROR ->][pColumnHeaders]="columns"></tr>
                  <ng-template [ngIf]="headerColumnGroup">
         "): ng:///AppModule/CsxDatatableComponent.html@14:74
Can't bind to 'pColumnHeaders' since it isn't a known property of 'tr'. ("                      <tr *ngFor="let headerRow of headerColumnGroup.rows" class="ui-state-default" [ERROR ->][pColumnHeaders]="headerRow.columns"></tr>
                  </ng-template>
              </thead>
"): ng:///AppModule/CsxDatatableComponent.html@16:100
Can't bind to 'pColumnFooters' since it isn't a known property of 'tr'. ("ass="ui-datatable-tfoot">
                  <tr *ngIf="!footerColumnGroup" class="ui-state-default" [ERROR ->][pColumnFooters]="columns"></tr>
                  <ng-template [ngIf]="footerColumnGroup">
         "): ng:///AppModule/CsxDatatableComponent.html@20:74
Can't bind to 'pColumnFooters' since it isn't a known property of 'tr'. ("                      <tr *ngFor="let footerRow of footerColumnGroup.rows" class="ui-state-default" [ERROR ->][pColumnFooters]="footerRow.columns"></tr>
                  </ng-template>
              </tfoot>
"): 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 ->][pTableBody]="columns"></tbody>
          </table>
      </div>
"): 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}">
              <div *ngIf="frozenColumns" [ERROR ->][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"></div>
              <div [ERROR ->][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 ->][virtualScroll]="virtualScroll" (onVirtualScroll)="onVirtualScroll($event)"
                  [ngClas"): ng:///AppModule/CsxDatatableComponent.html@34:55 ; Zone: <root> ; Task: Promise.then ;

pColumnHeaders, pColumnFooters - , DataTableModule. , , , - .

.

Update: app.module.ts. DataTableModule, BrowserModule FormsModule. datatable primeNg , .

app.module.ts

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 { }

+6

angularjs angularjs-directive angular2-template primeng angular2-directives

Himanshu Arora 05 . '17 18:25

1

Elwin Arens · Accepted Answer · 2017-06-27T12:20:44+0000

, , / PrimeNG.

DataTableModule , .

[pColumnHeaders], datatable.ts ColumnHeaders, , ColumnHeaders DataTableModule:

@NgModule({
    imports: [CommonModule,SharedModule,PaginatorModule,FormsModule],
    exports: [DataTable,SharedModule],
    declarations: [DataTable,DTRadioButton,DTCheckbox,ColumnHeaders,ColumnFooters,TableBody,ScrollableView,RowExpansionLoader]
})
export class DataTableModule { }

datatable.ts

, [pColumnHeaders], DataTableModule ColumnHeaders :

@NgModule({
    imports: [CommonModule,SharedModule,PaginatorModule,FormsModule],
    exports: [DataTable,SharedModule,ColumnHeaders],
    declarations: [DataTable,DTRadioButton,DTCheckbox,ColumnHeaders,ColumnFooters,TableBody,ScrollableView,RowExpansionLoader]
})
export class DataTableModule { }

, 'private' , API.

, , - , . , PrimeNG DataTable API .

Template parsing errors when overriding a DataTable in PrimeNg

More articles: