title: Angular 5 Material Table not getting data from service
body: <p>I am trying to simply display data from a MySQL database using Angular (5) with a Material table. The code I have compiles successfully, and a table with the column names and pagination buttons appears, but there is no data shown in the table.  I know that the API call is returning data correctly, and I know that the service is calling the API (I can see the correct data in the network inspector in the browser).  There is an error shown in the browser of</p>
  
  <pre><code>TypeError: _co.unitTypeDatabase.data is undefined
  Stack trace:
  View_UnitTypeComponent_0/&lt;@ng:///AppModule/UnitTypeComponent.ngfactory.js:136:9 ...
  </code></pre>
  
  <p>It would appear that the error is referring to the part in the html code referring to unitTypeDatabase.data.length.  If that is undefined, then it would explain why there is no data in the table as well.  What I can't figure out is <strong>why</strong> that is undefined.  I think it has to do with how/when/where I am creating the <code>new UnitTypeDatabase</code>, but given that the service is successfully being called I'm not sure where to go from here.  Here is the code I have:</p>
  
  <p><strong>unit-type.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { UnitType } from './unit-type';
  import { UnitTypeService } from './unit-type.service';
  import {DataSource} from '@angular/cdk/collections';
  import {MdPaginator} from '@angular/material';
  import {Observable} from 'rxjs/Observable';
  import {BehaviorSubject} from 'rxjs/BehaviorSubject';
  
  @Component({
    selector: 'app-unit-type',
    templateUrl: './unit-type.component.html',
    styleUrls: ['./unit-type.component.scss'],
    providers: [UnitTypeService]
  })
  export class UnitTypeComponent implements OnInit {
    public displayedColumns = ['unitTypeID', 'unitTypeName'];
    public unitTypeDatabase: UnitTypeDatabase | null;
    public dataSource: UnitTypeDataSource | null;
  
    @ViewChild(MdPaginator) paginator: MdPaginator;
  
    constructor(private unitTypeService: UnitTypeService) {}
  
    ngOnInit() {
        this.unitTypeDatabase = new UnitTypeDatabase(this.unitTypeService);
        this.dataSource = new UnitTypeDataSource(this.unitTypeDatabase, this.paginator);
    }
  }
  
  export class UnitTypeDataSource extends DataSource&lt;UnitType&gt; {
    constructor(private _unitTypeDatabase: UnitTypeDatabase, private _paginator: MdPaginator) {
        super();
      }
  
    connect(): Observable&lt;UnitType[]&gt; {
      const displayDataChanges = [
        this._unitTypeDatabase.dataChange,
        this._paginator.page
      ];
  
      return Observable.merge(...displayDataChanges).map(() =&gt; {
        const data = this._unitTypeDatabase.data.slice();
  
        const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
        return data.splice(startIndex, this._paginator.pageSize);
      })
    }
  
    disconnect() {}
  }
  
  export class UnitTypeDatabase {
    /** Stream that emits whenever the data has been modified. */
    public dataChange: BehaviorSubject&lt;UnitType[]&gt; = new BehaviorSubject&lt;UnitType[]&gt;([]);
    get data(): UnitType[] { return this.dataChange.value; }
  
    constructor(unitTypeService: UnitTypeService) {
        unitTypeService.getAllUnitTypes().subscribe(data =&gt; this.dataChange.next(data));
    }
  }
  </code></pre>
  
  <p><strong>unit-type.component.html</strong></p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8"&gt;
    &lt;md-table #table [dataSource]="dataSource"&gt;
  
      &lt;!-- ID Column --&gt;
      &lt;ng-container mdColumnDef="unitTypeID"&gt;
        &lt;md-header-cell *mdHeaderCellDef&gt; ID &lt;/md-header-cell&gt;
        &lt;md-cell *mdCellDef="let row"&gt; {{row.unitTypeID}} &lt;/md-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Name Column --&gt;
      &lt;ng-container mdColumnDef="unitTypeName"&gt;
        &lt;md-header-cell *mdHeaderCellDef&gt; Name &lt;/md-header-cell&gt;
        &lt;md-cell *mdCellDef="let row"&gt; {{row.unitTypeName}} &lt;/md-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;md-header-row *mdHeaderRowDef="displayedColumns"&gt;&lt;/md-header-row&gt;
      &lt;md-row *mdRowDef="let row; columns: displayedColumns;"&gt;&lt;/md-row&gt;
    &lt;/md-table&gt;
  
    &lt;md-paginator #paginator
              [length]="unitTypeDatabase.data.length"
              [pageIndex]="0"
              [pageSize]="25"
              [pageSizeOptions]="[5, 10, 25, 100]"&gt;
    &lt;/md-paginator&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>unit-type.ts</strong></p>
  
  <pre><code>export class UnitType {
      constructor(
          public unitTypeID: number,
          public unitTypeName: string
      ){}
  }
  </code></pre>
  
  <p><strong>unit-type.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { UnitType } from './unit-type';
  import { Headers, Http } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  
  @Injectable()
  export class UnitTypeService {
    private unit_types_Url = 'api/unit-types';  // URL to web api
    private headers = new Headers({'Content-Type': 'application/json'});
  
    constructor(private http: Http) { }
  
    getAllUnitTypes(): Observable&lt;UnitType[]&gt; {
      return this.http.get(this.unit_types_Url)
             .map(response =&gt; response.json().data as UnitType[]);
    }
  }
  </code></pre>
  
  <p>I started with the example from the Material site, but that does not retrieve data using a service.  I also tried to match the question and answer from <a href="https://stackoverflow.com/questions/45014257/how-to-use-md-table-with-services-in-angular-4">How to use md-table with services in Angular 4</a> but I must be missing something.  Hopefully it is an obvious and simple error or misunderstanding that someone can quickly spot.  Thanks!</p>
  
  <p><strong>Edit</strong>
  The full stack trace is:</p>
  
  <pre><code>ERROR TypeError: _this._unitTypeDatabase.data is undefined
  Stack trace:
  [208]/UnitTypeDataSource.prototype.connect/&lt;@http://localhost:4200/main.bundle.js:93:17
  MapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:51417:22
  Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:37214:13
  OuterSubscriber.prototype.notifyNext@http://localhost:4200/vendor.bundle.js:48573:9
  InnerSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:117362:9
  Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:37214:13
  Subject.prototype.next@http://localhost:4200/vendor.bundle.js:26457:17
  BehaviorSubject.prototype.next@http://localhost:4200/vendor.bundle.js:49978:9
  UnitTypeDatabase/&lt;@http://localhost:4200/main.bundle.js:122:78
  SafeSubscriber.prototype.__tryOrUnsub@http://localhost:4200/vendor.bundle.js:37363:13
  SafeSubscriber.prototype.next@http://localhost:4200/vendor.bundle.js:37310:17
  Subscriber.prototype._next@http://localhost:4200/vendor.bundle.js:37250:9
  Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:37214:13
  MapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:51423:9
  Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:37214:13
  onLoad@http://localhost:4200/vendor.bundle.js:53409:21
  ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6443:17
  onInvokeTask@http://localhost:4200/vendor.bundle.js:4914:24
  ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6442:17
  Zone.prototype.runTask@http://localhost:4200/polyfills.bundle.js:6242:28
  ZoneTask/this.invoke@http://localhost:4200/polyfills.bundle.js:6496:28
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/nuzkI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nuzkI.png" alt="enter image description here"></a></p>