angular data table throws error

Question

I am using angular data table link to the repo is: angular5-data-table

while using the package i am getting templatae parse errors :

I have included the package in app module but still facing the issue:

app.component.ts

 import { Component } from '@angular/core';
import { DataTableResource } from 'angular5-data-table';
import persons from './data-table-demo1-data';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  itemResource = new DataTableResource(persons);
  items = [];
  itemCount = 0;

  constructor() {
    this.itemResource.count().then(count => this.itemCount = count);
  }

  reloadItems(params) {
    this.itemResource.query(params).then(items => this.items = items);
  }

  // special properties:
  rowClick(rowEvent) {
    console.log('Clicked: ' + rowEvent.row.item.name);
  }

  rowDoubleClick(rowEvent) {
    alert('Double clicked: ' + rowEvent.row.item.name);
  }

  rowTooltip(item) { return item.jobTitle; }
}

app.component.html

    <div style="margin: auto; max-width: 1000px; margin-bottom: 50px;">
  <data-table id="persons-grid"
              headerTitle="Employees"
              [items]="items"
              [itemCount]="itemCount"
              (reload)="reloadItems($event)"
              (rowClick)="rowClick($event)"
              (rowDoubleClick)="rowDoubleClick($event)"
              [rowTooltip]="rowTooltip"
  >
    <data-table-column
      [property]="'name'"
      [header]="'Name'"
      [sortable]="true"
      [resizable]="true">
    </data-table-column>
    <data-table-column
      [property]="'date'"
      [header]="'Date'"
      [sortable]="true">
      <ng-template #dataTableCell let-item="item">
        <span>{{item.date | date:'yyyy-MM-dd'}}</span>
      </ng-template>
    </data-table-column>
    <data-table-column
      property="phoneNumber"
      header="Phone number"
      width="150px">
    </data-table-column>
    <data-table-column
      [property]="'jobTitle'"
      [header]="'Job title'"
      [visible]="false">
    </data-table-column>
    <data-table-column
      [property]="'active'"
      [header]="'Active'"
      [width]="100"
      [resizable]="true">
      <ng-template #dataTableHeader let-item="item">
        <span style="color: rgb(232, 0, 0)">Active</span>
      </ng-template>
      <ng-template #dataTableCell let-item="item">
                <span style="color: grey">
                <span class="glyphicon glyphicon-ok" *ngIf="item.active"></span>
                <span class="glyphicon glyphicon-remove" *ngIf="!item.active"></span>
                </span>
      </ng-template>
    </data-table-column>
  </data-table>
</div>

I also tried including the package in my app.module.ts nothing works I am using angular5 package.json

  {

  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "angular5-data-table": "^0.5.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.2",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

Juke · Accepted Answer · 2018-06-13 12:29:48Z

2

This error rises when you are not importing the data-table module in module.ts or by using wrong tag in the html. an I see there is only tag "table" not "data-table" and just import datatable directive inside the table tag.

edited Jun 13, 2018 at 12:29

answered Jun 13, 2018 at 12:16

Juke

1,4562 gold badges13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fabricio Ardizon · Accepted Answer · 2018-04-30 07:29:02Z

0

It is possible that 'data-table module' is not added to NgModule.

Check this documentation:

http://www.devglan.com/angular/angular-data-table-example

answered Apr 30, 2018 at 7:29

Fabricio Ardizon

1065 bronze badges

Collectives™ on Stack Overflow

angular data table throws error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related