title: Angular mat-table inline filter with drop down
body: <p>How to get a drop down in the inline filter with unique values from the grid. For example my JSON returns 100 rows of Person object. That has 5 columns. I want to filter all these columns. I want 3 columns to be text box and other 2 columns to be drop down. Here in the example there are 4 rows, I want to display only the 3 unique values (i.e. 'Dog', 'Cat' and 'Lizard') in the Pet filter and that should be a drop down. (Note: don't want to display 'Dog' twice the drop down). And upon selection of a value from the drop down, the table should refresh accordingly. Similarly for Active column where it should have only 2 values (i.e. true and false) in the drop down.</p>
  <p><a href="https://stackblitz.com/edit/angular-mucxn8?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">Stackblitz example</a></p>
  <pre><code>createFilter(): (data: any, filter: string) =&gt; boolean {
      let filterFunction = function(data, filter): boolean {
        let searchTerms = JSON.parse(filter);
        return data.name.toLowerCase().indexOf(searchTerms.name) !== -1
          &amp;&amp; data.id.toString().toLowerCase().indexOf(searchTerms.id) !== -1
          &amp;&amp; data.colour.toLowerCase().indexOf(searchTerms.colour) !== -1
        //&amp;&amp; data.active.toLowerCase().indexOf(searchTerms.active) !== -1   ??? How to write this ???
          &amp;&amp; data.pet.toLowerCase().indexOf(searchTerms.pet) !== -1;
      }
      return filterFunction;
    }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/YIJaM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YIJaM.png" alt="enter image description here" /></a></p>