Encapsulating ng2-table in Angular 6

Question

This is a newbie question, so please bear with me. I want to abstract ng2-table wrapping it in a reusable component. First, I defined a template:

table.comp.html

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

Then, I defined the component:

table.comp.ts

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

@Component({
  selector: 'my-table',
  templateUrl: 'table.comp.html',
  styles: []
})
export class TableComponent {
    
    columns:Array<any> = [
            {title: 'Name', name: 'name'},
            {title: 'Id', name: 'id'},
            {title: 'Age', name: 'age'},
          ];

    config:any = {
                paging: true,
                sorting: {columns: this.columns}
              };

 
    rows = [ .. // rows will be populated here  // .. ]
 }

Lastly, I defined a module to import the ng2-table:

table.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Ng2TableModule } from 'ng2-table/ng2-table';
import { TableComponent } from './table.comp';

@NgModule({
  declarations: [
      TableComponent
  ],
  imports: [
    BrowserModule,
    Ng2TableModule
  ],
  bootstrap: [TableComponent]
})
export class TableModule {}

To invoke my-table, I import it in the following module:

@NgModule({
  declarations: [
    CallingComponent
  ],
  imports: [
    BrowserModule,
    TableModule
  ],
  bootstrap: [CallingComponent]
})
export class CallingModule {}

And the related component:

@Component({
      selector: 'some-selector',
      template: '<my-table></my-table>'
    })
export class CallingComponent {}

I get the following error in the browser console:

'my-table' is not a known element:

...

How to fix this problem?

score 0 · Accepted Answer · answered Jul 19 '18 at 16:38

You need to export the component to be available in other modules.

For example:

@NgModule({
  declarations: [
      TableComponent
  ],
  exports: [
     TableComponent   // <-- this was missing
  ],
  imports: [
    BrowserModule,
    Ng2TableModule
  ],
  bootstrap: [TableComponent]
})
export class TableModule {}

Encapsulating ng2-table in Angular 6

1 Answers1