title: Encapsulating ng2-table in Angular 6
body: <p>This is a newbie question, so please bear with me. I want to abstract <code>ng2-table</code> wrapping it in a reusable component. First, I defined a template:</p>
  <p>table.comp.html</p>
  <pre><code>&lt;ng-table [config]=&quot;config&quot;
            [rows]=&quot;rows&quot; [columns]=&quot;columns&quot;&gt;
  &lt;/ng-table&gt;
  </code></pre>
  <p>Then, I defined the component:</p>
  <p>table.comp.ts</p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-table',
    templateUrl: 'table.comp.html',
    styles: []
  })
  export class TableComponent {
      
      columns:Array&lt;any&gt; = [
              {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  // .. ]
   }
  </code></pre>
  <p>Lastly, I defined a module to import the ng2-table:</p>
  <p>table.module.ts</p>
  <pre><code>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 {}
  </code></pre>
  <p>To invoke <code>my-table</code>, I import it in the following module:</p>
  <pre><code>@NgModule({
    declarations: [
      CallingComponent
    ],
    imports: [
      BrowserModule,
      TableModule
    ],
    bootstrap: [CallingComponent]
  })
  export class CallingModule {}
  </code></pre>
  <p>And the related component:</p>
  <pre><code>@Component({
        selector: 'some-selector',
        template: '&lt;my-table&gt;&lt;/my-table&gt;'
      })
  export class CallingComponent {}
  </code></pre>
  <p>I get the following error in the browser console:</p>
  <blockquote>
  <p>'my-table' is not a known element:</p>
  <p>...</p>
  </blockquote>
  <p>How to fix this problem?</p>