title: How do I connect my md-table (cdk data-table) to a service to be used as the data source?
body: <p>Sorry but I'm in the dark with this one. </p>
  
  <p>I have a method that returns an array of objects and I use that array of objects to display a table. this is the function that I'm using: </p>
  
  <pre><code>getCompetitions(): Promise&lt;Competition[]&gt; {
      let options: RequestOptionsArgs = {};
      let params = new URLSearchParams();
      params.append('size', '250');
      options.params = params;
      return this.http.get(this.competitionsUrl,options)
                 .toPromise()
                 .then(response =&gt; response.json()._embedded.competitions as Competition[])
                 .catch(this.handleError);
    }
  </code></pre>
  
  <p>My <em>ngOnInit()</em> method was calling that function on start and getting an array of competitions which was iterated with <em>ngFor</em> and I was creating the table without a problem. </p>
  
  <p>What I want is to implement md-table or cdk-table component. I have the rest of the app using that UI library. </p>
  
  <ul>
  <li>I know my imports are correct.</li>
  <li>The HTML seems to be fine because the single header I have is displayed</li>
  <li>There are no errors in the console but the <em>competitionsDataSource</em> seems to be Empty. </li>
  </ul>
  
  <p>I add my files below, I know the problem is in the implementation or how I'm trying to populate the dataSource. </p>
  
  <p>Here is <strong>the competition class:</strong> </p>
  
  <pre><code>export class Competition {
    compName: string;
    compStart: Date;
    compEnd: Date;
    compFull: number;
    compTeamCount: number;
    compChamp: number;
    compRunnerup: number;
    compType: number;
    compCountry: string;
    _links: {
      self: {
        href: string;
      },
      matches: {
        href: string;
      }
    }
  }
  </code></pre>
  
  <p>Here is <strong>the Component</strong></p>
  
  <pre><code>import { Component, OnInit }  from '@angular/core';
  import { DataSource }         from '@angular/cdk';
  
  import { Observable }         from 'rxjs/Observable';
  import { BehaviorSubject }    from 'rxjs/BehaviorSubject';
  
  import { Competition }        from '../../competition/competition';
  import { CompetitionService } from '../../competition/competition.service'
  
  import 'rxjs/add/operator/startWith';
  import 'rxjs/add/observable/merge';
  import 'rxjs/add/operator/map';
  
  @Component({
      selector: 'comp-table-cmp',
      moduleId: module.id,
      templateUrl: 'competitions-table.component.html',
  })
  
  export class CompetitionsTableComponent{
  
      //1- Define my columns
      displayedColumns = ['compName'];
      //2- Define the database as a new database
      competitionsDatabase = new CompetitionsDatabase();
      //3- Define the datasource
      competitionsDatasource: CompetitionsDatasource | null;
  
      ngOnInit() {
        //4 - declare the datasource.
        this.competitionsDatasource = new CompetitionsDatasource(this.competitionsDatabase);
        console.log(this.competitionsDatasource);
      }
  }
  
  
  export class CompetitionsDatabase {
    competitions: Competition[];
    dataChange: BehaviorSubject&lt;Competition[]&gt; = new BehaviorSubject&lt;Competition[]&gt;([]);
    get data(): Competition[] { 
      this.competitions = [];
      this.competitionService.getCompetitions().then(
        results =&gt; {
            results.forEach(result =&gt; {
                if (result.compType === 1) {
                    this.competitions.push(result);
                    this.dataChange.next(results);
                }
                //Call Method to retrieve team names.
            });
          return results;
          }
      )
    console.log(this.dataChange);
    return this.competitions;
    }
  
    constructor(
        private competitionService: CompetitionService,
    ) {}
  }
  
  export class CompetitionsDatasource extends DataSource&lt;any&gt; {
    constructor(private _exampleDatabase: CompetitionsDatabase) {
      super();
    }
  
    /** Connect function called by the table to retrieve one stream containing the data to render. */
    connect(): Observable&lt;Competition[]&gt; {
      console.log('ExampleDataSource#connect')
      return this._exampleDatabase.dataChange;
    }
    disconnect() {}
  }
  </code></pre>
  
  <p><strong>And the HTML</strong>: </p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8"&gt;
    &lt;cdk-table #table [dataSource]="CompetitionsDatasource" class="example-table"&gt;
      &lt;!--- Note that these columns can be defined in any order.
            The actual rendered columns are set as a property on the row definition" --&gt;
  
      &lt;!-- CompName Column --&gt;
      &lt;ng-container cdkColumnDef="compName"&gt;
        &lt;cdk-header-cell *cdkHeaderCellDef class="example-header-cell"&gt; CompName &lt;/cdk-header-cell&gt;
        &lt;cdk-cell *cdkCellDef="let row" class="example-cell"&gt; {{competition.compName}} &lt;/cdk-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"&gt;&lt;/cdk-header-row&gt;
      &lt;cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"&gt;&lt;/cdk-row&gt;
    &lt;/cdk-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The result is just the header "CompName"</p>
  
  <p>Please help!</p>