title: Angular 5 MatTableDataSource returns error "Property 'subscribe' does not exist on type 'OrderDataSource'"
body: <p>I'm trying to work with MatTables in Angular 5 and getting following error:</p>
  
  <blockquote>
    <p>ERROR in src/app/components/order/order.component.ts(30,59): error TS2339: Property 'subscribe' does not exist on type 'OrderDataSource'.</p>
  </blockquote>
  
  <p>Here is my code:</p>
  
  <p><strong>order.component.ts</strong></p>
  
  <pre><code>import { Observable } from 'rxjs';
  import { Injectable } from '@angular/core';
  import { Component, OnInit } from '@angular/core';
  import { DataSource } from '@angular/cdk/collections';
  import { MatTableDataSource } from '@angular/material';
  
  import { Order } from '../../models/order.model';
  
  @Component({
      selector: 'app-order',
      templateUrl: './order.component.html',
      styleUrls: ['./order.component.css']
  })
  export class OrderComponent implements OnInit {
      displayedColumns = ['id', 'status', 'is_active'];
  
      dataSourceNewOrders = new MatTableDataSource();
      dataSourceOpenOrders = new MatTableDataSource();
      dataSourceProblemOrders = new MatTableDataSource();
  
      constructor() { }
  
      ngOnInit() {
        this.loadOrders();
      }
  
      loadOrders(){
          new OrderDataSource('problem').subscribe(
              data =&gt; {
                  this.dataSourceProblemOrders.data = data;
          });
  
          new OrderDataSource('new').subscribe(
              data =&gt; {
                  this.dataSourceNewOrders.data = data;
          });
  
          new OrderDataSource('in-progress').subscribe(
              data =&gt; {
                  this.dataSourceOpenOrders.data = data;
          });
      }
  }
  
  @Injectable()
  export class OrderDataSource{
      constructor(private orderType: string){    
      }
  
      connect(): Observable&lt;Order[]&gt; {
          let records: Order[] = [{
              id: 1,
              status: "new",
              is_active: true
            },
            {
              id: 2,
              status: "new",
              is_active: false
            },
            {
              id: 3,
              status: "in-progress",
              is_active: true            
            }];
  
          return Observable.of(records).delay(500);
  
  //        return this.orderService.readRecords({
  //            'status': this.orderType
  //        });
      }
  
      disconnect() {}
  }
  </code></pre>
  
  <p><strong>order.model.ts</strong></p>
  
  <pre><code>export interface Order {
      id: number;
      client_id?: number;
      dealer_id?: number;
  
      status: string;
      is_active: boolean;
      date_created?: string;
      date_updated?: string;
  }
  </code></pre>