title: How to use md-table with services in Angular 4
body: <p>I am quite new in the angular world and i'm trying to use the new md-table component in Angular Material 2 with Angular 4.</p>
  
  <p>I've made a service from an API which retrieves simple arrays of content.
  Now I'm trying to use this service as a data source for the md-table but I can't find a way to get the data from the service (it always return me an empty array).</p>
  
  <p>Please note that before using md-table, I was using already using the service and it worked normally.</p>
  
  <p>Here is the code for the component :</p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import {DataSource} from '@angular/cdk';
  import {MdPaginator} from '@angular/material';
  import {BehaviorSubject} from 'rxjs/BehaviorSubject';
  import {Observable} from 'rxjs/Observable';
  import 'rxjs/add/operator/startWith';
  import 'rxjs/add/observable/merge';
  import 'rxjs/add/operator/map';
  
  import { GroupService } from '../shared/group.service';
  import { Group } from '../shared/group';
  
  @Component({
    selector: 'app-group-list',
    templateUrl: './group-list.component.html',
    styleUrls: ['./group-list.component.css'],
    providers: [GroupService]
  })
  export class GroupListComponent implements OnInit{
  
    public DisplayedColumns = ['name', 'email', 'directMembersCount'];
    public groupDatabase = new GroupDatabase();
    public dataSource : CustomDataSource | any;
  
    @ViewChild(MdPaginator) paginator : MdPaginator;
  
    constructor() {}
  
    ngOnInit() {
      this.dataSource = new CustomDataSource(this.groupDatabase, this.paginator);
      console.log(this.dataSource);
    }
  
  }
  
  export class GroupDatabase implements OnInit {
  
    public dataChange: BehaviorSubject&lt;Group[]&gt; = new BehaviorSubject&lt;Group[]&gt;([]);
    get data(): Group[] { return this.dataChange.value }
  
    private _groupService : GroupService
  
    private getAllGroups(){
      return this._groupService
        .getAllGroups();
    }
  
    constructor (){}
  
    ngOnInit() {
        this.getAllGroups();
        console.log(this.getAllGroups());
    }
  }
  
  export class CustomDataSource extends DataSource&lt;any&gt; {
  
    constructor(private _groupDatabase = new GroupDatabase(), private _paginator: MdPaginator){
      super();
    }
  
    connect(): Observable&lt;Group[]&gt; {
      const displayDataChanges = [
        this._groupDatabase.dataChange,
        this._paginator.page
      ];
      return Observable.merge(...displayDataChanges).map(() =&gt; {
        const data = this._groupDatabase.data.slice();
        console.log(data);
  
        const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
        return data.splice(startIndex, this._paginator.pageSize);
      })
    }
  
    disconnect() {}
  }
  </code></pre>
  
  <p>Here is the code for the HTML :</p>
  
  <pre><code>&lt;md-table #table [dataSource]="dataSource"&gt;
  
    &lt;ng-container *cdkColumnDef="name"&gt;
      &lt;md-header-cell *cdkCellDef&gt;Nom&lt;/md-header-cell&gt;
      &lt;md-cell *cdkCellDef="let row"&gt; {{row.name}} &lt;/md-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container *cdkColumnDef="email"&gt;
      &lt;md-header-cell *cdkCellDef&gt;Email&lt;/md-header-cell&gt;
      &lt;md-cell *cdkCellDef="let row"&gt; {{row.email}} &lt;/md-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container *cdkColumnDef="directMembersCount"&gt;
      &lt;md-header-cell *cdkCellDef&gt;Nombre de membres&lt;/md-header-cell&gt;
      &lt;md-cell *cdkCellDef="let row"&gt; {{row.directMembersCount}} &lt;/md-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;md-header-row *cdkHeaderRowDef="displayedColumns"&gt;&lt;/md-header-row&gt;
    &lt;md-row *cdkRowDef="let row; columns: DisplayedColumns;"&gt;&lt;/md-row&gt;
  
  &lt;/md-table&gt;
  
  &lt;md-paginator #paginator
                [length]="groupDatabase.data.length"
                [pageIndex]="0"
                [pageSize]="25"
                [pageSizeOptions]="[5, 10, 25, 100]"&gt;
  &lt;/md-paginator&gt;
  </code></pre>
  
  <p>And the concerned service :</p>
  
  <pre><code>private groupApiUrl: string;
    private groupsApiUrl: string;
    private headers: Headers;
    constructor(public http:Http, private config: Config) {
      this.groupApiUrl = config.serverWithApi + "group";
      this.groupsApiUrl = config.serverWithApi + "groups";
  
      this.headers = new Headers();
      this.headers.append('Content-Type', 'application/json');
      this.headers.append('Accept', 'application/json');
    }
  
    public getAllGroups = (): Observable&lt;Group[]&gt; =&gt; {
      return this.http.get(this.groupsApiUrl)
        .map((response: Response) =&gt; &lt;Group[]&gt;response.json())
        .catch(this.handleError)
    }
  </code></pre>
  
  <p>I'm not sure how I should call the service using the datasource, that's why I did it as I was doing before; using the ngOnInit method.</p>
  
  <p>Thanks for you help.</p>