title: Filter on mat-table not working
body: <p>Successfully built and displaying an md-table with Angular using DataSource. But when I try to add a filter it says that <strong>filter does not exist on type "Account Data Source"</strong>. Below is my account-list.component.js
  Just wondering what I might be doing wrong? Do I need to add filter elsewhere?</p>
  
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  import { AccountService, ACCOUNT_SERVICE_TOKEN } from '../shared/account.service';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/observable/of';
  import 'rxjs/add/operator/filter';
  import { DataSource } from '@angular/cdk/collections';
  import { Account } from '../shared/account';
  
  
  @Component({
    templateUrl: './account-list.component.html',
    styleUrls: ['./account-list.component.scss']
  })
  export class AccountListComponent implements OnInit {
  
    dataSource = new AccountDataSource(this.accountService);
    displayedColumns = ['id', 'name', 'date', 'manager'];
    //here is where I am adding the filter as described by the angular material docs
    applyFilter(filterValue: string) {
      filterValue = filterValue.trim(); // Remove whitespace
      filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
      this.dataSource.filter = filterValue;
    }
    accounts: Account[];
    constructor(@Inject(ACCOUNT_SERVICE_TOKEN) private accountService: AccountService) { }
  
    ngOnInit() {
  
    }
  }
  export class AccountDataSource extends DataSource&lt;any&gt; {
    constructor(private accountService: AccountService) {
      super();
    }
  
    connect(): Observable&lt;Account[]&gt; {
      return this.accountService.list();
    }
  
    disconnect() {}
  }
  </code></pre>
  
  <p>Here are my dependencies and devdepen:</p>
  
  <pre><code>  "dependencies": {
      "@angular/animations": "^5.0.0",
      "@angular/cdk": "^5.0.0",
      "@angular/common": "^5.0.0",
      "@angular/compiler": "^5.0.0",
      "@angular/core": "^5.0.0",
      "@angular/flex-layout": "^2.0.0-beta.12",
      "@angular/forms": "^5.0.0",
      "@angular/http": "^5.0.0",
      "@angular/material": "^5.0.0",
      "@angular/platform-browser": "^5.0.0",
      "@angular/platform-browser-dynamic": "^5.0.0",
      "@angular/router": "^5.0.0",
      "core-js": "^2.4.1",
      "hammerjs": "^2.0.8",
      "material-design-icons": "^3.0.1",
      "rxjs": "^5.5.2",
      "zone.js": "^0.8.14"
    },
    "devDependencies": {
      "@angular/cli": "1.6.1",
      "@angular/compiler-cli": "^5.0.0",
      "@angular/language-service": "^5.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "^4.0.1",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.1.2",
      "ts-node": "~3.2.0",
      "tslint": "~5.7.0",
      "typescript": "~2.4.2"
  </code></pre>