ng2-table with angular cli and bootstrap 4

[kaveh981]

Am I able to use ng2-table with angular cli and bootstrap 4 because currently I'm having some issues First I'm not sure what should be exactly app.module.ts I want to use pagination, sorting and filtering options this is how i wrote my app.module.ts

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

import { AppComponent } from './app.component';

import { Ng2TableModule } from 'ng2-table/ng2-table';
import { PaginationModule } from 'ngx-bootstrap';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    PaginationModule.forRoot(),
    Ng2TableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

but I can't see data populated in my table and in console i'm having error saying: TypeError: Cannot read property 'match' of undefined at http://localhost:4200/main.bundle.js:278:45 Can you please tell what am i missing? Thanks!

[themese]

Maybe it's a bit too late, but if you want to use the plugin you have two options:

1. You import the whole plugin:

   • import { Ng2TableModule } from "ng2-table";
   • add to ngModule imports Ng2TableModule

2. Import only the module you want to use. For example if you want to use pagination module:

   • import { PaginationModule } from "ng2-table";
   • add to ngModule imports PaginationModule

Should be easy enough to start, so any other error must be in any place of your code. Hope this helped although it's been a few weeks you've posted this.

[LotusShiv]

In my case its slightly a different problem. I am importing the Ng2TableModule and added to @NgModule and the whole nine yards. I am able to see data in the table when I provide static dummy data. But when I call a webapi to get the data, I do see the data within the service call even in my ..service.ts code, but after that it says error in foreach - object not found. Not sure what I am doing wrong. Here is my service ` getData(dtID): Observable { this.uri = this.baseUrl + '/Tools/GetData'; let params = { dataID: dtID }; let options = new RequestOptions({ search: params }) let info$ = this._http.get(this.uri, options) .map(this.extractData) .catch(this.handleError); return info$; } private extractData(res: Response) { let body = res.json(); return body.ResponseData || {}; }

... And in my component that uses ng2-table I have public dataRows: Array = []; public dataCols: Array = []; dtID: number; public config: TableLayout = { paging: true, sorting: { columns: this.columns}, filtering: { filterString: '' }, className: ['table-striped', 'table-bordered'] };

constructor(private _getService: ToolsServices) {
    this.dtID= 821;
 }

 getData() {
    this._getService.getData(this.dtID)
        .subscribe(
        data => {
            this.columns = data.columns,
            this.Data = data.tableData
        },
        error => this.errorMessage = <any>error,
        () => {
            console.log('Call Complete  - ' + this.columns.length + ', ' + this.tableData.length);
            return;
        }
    );
    if (this.columns !== undefined && this.columns !== null) {
        console.log('data columns = ' + this.columns.length);
    }
    
}
ngOnInit(): void {
    //this.getData();
    setTimeout(() => {
        return this.getData();
    }, 1000);
    
}

And snippet of my html  is
<div class="row" style="padding:0; margin-left:1px;">
<header-info>loading...</header-info>
<div class="row" style="height:380px;">
    <ng-table [config]="config"
              (tableChanged)="onChangeTable(config)"
              (cellClicked)="onCellClick($event)"
              [rows]="Data" [columns]="columns">
    </ng-table>
</div>
<hr />
<footer-info></footer-info>

`

I see the console output showing columns.length = 8 and tableData.length = 81 (just for e.g.) but I still get the error ERROR TypeError: Unable to get property 'forEach' of undefined or null reference ERROR CONTEXT [object Object]

Any help is greatly appreciated. I am new to using Angular 4. Miss the good old days of angularJS...