title: Set custom data-source for Angular Material Table in Angular 7
body: <p><strong><em>P.S: I am new to Angular as well as to JS.</em></strong></p>
  
  <p>In my new angular 7 project, i have a <em>Material Data Table</em> component. From a REST API, after making a <code>GET</code> call, i am able to populate an array of required object. It all happens in the component's <code>ngOnInit</code> method. (Not including the code, as it's irrelevant).</p>
  
  <p>My question is, how do i bind the array to the <code>dataSource</code> of the data-table? In the data-table's HTML, i have, at the top :</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource" matSort aria-label="Elements"&gt;
    ....
    ....
    &lt;td mat-cell *matCellDef="let row"&gt;{{row.id}}&lt;/td&gt;
  &lt;/...&gt;
  </code></pre>
  
  <p>In the <code>..DataSource.ts</code> file, i have some properties and the <code>connect</code>, <code>disconnect</code> methods defined as follows:</p>
  
  <pre><code>export class TestTableItem {
   id: number; 
  }
  
  export class TestTableDataSource extends DataSource&lt;TestTableItem&gt; {
  paginator: MatPaginator;
  sort: MatSort;
  
    constructor(private TestArray: any[]) {
     super();
    }
  
    connect(collections: CollectionViewer): Observable&lt;TestTableItem[]&gt; {
      return observableOf&lt;TestTableItem[]&gt;(this.TestArray);
    }
  
    disconnect() {}
  </code></pre>
  
  <p>In the <code>component.ts</code>, i have the <code>dataSource</code> property declared, and as mentioned above, i am populating the array in the <code>ngOnInit()</code> method, as follows :</p>
  
  <pre><code> private myCollection: TestTableItem[] = [];
  
   dataSource = new MatTableDataSource(this.myCollection);
  
   ngOnInit() {
  
    ...
    //adding new item to myCollection
   }
  </code></pre>
  
  <p>So, finally, how do i bind the array to the table? I tried to pass <code>new TestTableDataSource(this.myCollection);</code> to <code>this.dataSource</code>, in the <code>ngOnInIt</code> method, but it fails as <code>dataSource</code> and <code>TestTableDataSource</code> are of different types.</p>
  
  <p>Not sure if i was able to put the words properly, but i hope readers would get my point. Any indication would be appreciated.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>If i define <code>dataSource</code> as <code>TestTableDataSource</code>, as follows :</p>
  
  <pre><code>dataSource: TestTableDataSource;
  </code></pre>
  
  <p>The code works fine. However, the table remains empty. What's interesting is, making this change also removes all the columns of the table. The table becomes entirely blank. Why would the happen even when <code>myCollection</code> wasn't empty ?</p>