title: Angular Material Table own datasource with filter method
body: <p>With the help of this <a href="https://codingthesmartway.com/angular-material-part-4-data-table/" rel="nofollow noreferrer">tutorial</a> I wrote my own datasource for the angular material table. I get the list of data from an api and display it in a material table.</p>
  
  <p>Code MyDataSource</p>
  
  <pre><code>export class MyDataSource extends DataSource&lt;any&gt; {
  
    private users: Observable&lt;User[]&gt;;
  
    constructor(private userService: UserService) {
      super();
    }
  
    connect(): Observable&lt;User[]&gt; {
      this.users = this.userService.getAll();
      return this.users;
    }
  
    disconnect() { }
  
    filterWithCriteria(filterData: any): any {
      return this.users
        .filter(element =&gt; element[filterData.criteria].toLocaleLowerCase().includes(filterData.searchTerm.toLocaleLowerCase()))
        .map(element =&gt; element)
        .subscribe(
          element =&gt; console.log(element),
          err =&gt; console.error(err),
          () =&gt; console.log('Streaming is over')
        );
     }
  }
  </code></pre>
  
  <p>The api delivers an observable with user objects.</p>
  
  <p>Code User</p>
  
  <pre><code>export class User implements models.User {
    constructor(
      public name?: string,
      public adress?: string,
      public email?: string,
      public telefon?: string,
      public birthday?: Date
    ) {}
  }
  </code></pre>
  
  <p>The objective is to search in the list of the user with a criteria. The criteria can be name, adress, ... </p>
  
  <blockquote>
  <pre><code>.filter(element =&gt; element[filterData.criteria].toLocaleLowerCase().includes(filterData.searchTerm.toLocaleLowerCase()))
  </code></pre>
  </blockquote>
  
  <p>This line gives me the error the toLocaleLowerCase is not defined in User and</p>
  
  <blockquote>
  <pre><code> console.log(this.users[filterData.criteria]);
  </code></pre>
  </blockquote>
  
  <p>gives me 'undefined'.</p>
  
  <p>Thanks for the help,</p>
  
  <p>Best Regards</p>