title: Angular Material Table filterPredicate to filter objects
body: <p>I have a mat-table with a text input to filter it's results.</p>
  
  <p>Datasource is:</p>
  
  <pre><code>[
      {
          "articolo": {
              "code": "22.398.14",
              "url": "/url1"
          },
          "color": "white",
          "weight": "10"
      },
      {
          "articolo": {
              "code": "22.398.15",
              "url": "/url2"
          },
          "color": "red",
          "weight": "20"
      }
  ]
  </code></pre>
  
  <p>I add this in html:</p>
  
  <pre><code>    &lt;mat-form-field&gt;
      &lt;mat-label&gt;Filtra&lt;/mat-label&gt;
      &lt;input matInput (focus)="setupFilter('articolo')" (keyup)="applyFilter($event)" placeholder="Filter"&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>And in ts:</p>
  
  <pre><code>setupFilter(column: string) {
      this.data.filterPredicate = (data, filter) =&gt; {
        data[column].code.indexOf(filter) != -1;
      }
    }
  
  applyFilter(event: Event) {
      const filterValue = (event.target as HTMLInputElement).value;
      this.data.filter = filterValue.trim().toLowerCase();
    }
  </code></pre>
  
  <p>But nothing happens</p>
  
  <p>If I add a console.log inside filterPredicate it doesn't fire:</p>
  
  <pre><code>this.data.filterPredicate = (data, filter) =&gt; {
        console.log(data);
  ...
  </code></pre>
  
  <p>What's wrong?</p>
  
  <p>thanks</p>