Faigjaz Faigjaz - 2 months ago 319
TypeScript Question

Ng2-table not working with latest Angular2 version

I am currently using Angular2 for my application and now I want to add ng2-table to my component.
ng2-Table on Git

I am getting this error and couldn't help but ask:

angular2-polyfills.js:487 Unhandled Promise rejection: Template parse errors:
Can't bind to 'colums' since it isn't a known property of 'ng-table'.
1. If 'ng-table' is an Angular component and it has 'colums' input, then
verify that it is part of this module.
2. If 'ng-table' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA"
to the '@NgModule.schema' of this component to suppress this message.
("
</div>-->
<ng-table [ERROR ->][colums]="columns" [rows]="rows" > </ng-table>
<div class="">
"): DeviceOverviewComponent@18:10 ;
Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…)


In my html I got this:

<ng-table [columns]="columns" [rows]="rows" > </ng-table>


My Component is this:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { DeviceService } from '../services/device.service';


@Component({
selector: 'device-overview',
templateUrl: 'dist/html/deviceoverview.component.html',
providers: [DeviceService],

})
export class DeviceOverviewComponent {
devices: any;
columns: any;
rows: any;
constructor(private deviceService: DeviceService, private router: Router) {
}

loadDevices() {
this.deviceService.getDevices()
.then((data) => {
this.devices = data
this.rows = this.devices
})
}

goToDevice(deviceName: string) {
this.router.navigateByUrl('/devices/' + deviceName)
}

ngOnInit() {
this.columns = [
{ title: "test", name: "id" }]
this.loadDevices();
}

}


And my app.module is this:

import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { Ng2TableModule } from 'ng2-table/ng2-table';

import { AppComponent } from './components/app.component';
import { DeviceOverviewComponent } from './components/deviceoverview.component'

import { DeviceService } from './services/device.service';

import { routing } from './app.routing';

@NgModule({
imports: [
Ng2TableModule,
BrowserModule,
FormsModule,
HttpModule,
routing,

],
declarations: [
DeviceOverviewComponent,
AppComponent,
],
providers:
[
{provide: LocationStrategy, useClass: HashLocationStrategy},
DeviceService,

],
bootstrap: [AppComponent]
})
export class AppModule { }


Does anybody know anything about the Usage of ng2-table? Or is there a valid alternative, since the demo page/usage documentation is not available by now?

I found some alternatives, but lots of them had their last commit a long time ago, which might be a problem, since I am always using latest Angular2.

Thanks for reading and any hel is appreciated!

EDIT:
I've made it to the next step!

I needed to add

import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'
@NgModule({ ...,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})


within my app.module.ts

Now I am getting the table header with the "test" column and the ID property of my row data is displayed correctly.

Even the demo from ng2-table didn't have that import.
I guess docs and demos arent made for newbes nowadays. :/

Answer

i see a typo in your html:

[colums]="columns"

It should be

[columns]="columns"

You're missing n

Plunker Example (I also tried it on local machine and it works)

You shouldn't use CUSTOM_ELEMENTS_SCHEMA

systemjs.config.js

map: {
  ...
  'ng2-table': 'npm:ng2-table'
},
packages: {
  ...
  'ng2-table': {
      defaultExtension: 'js'
  }
}