title: Angular 2 - Search pipe filter with drop down options
body: <p>I have a pipes that is default to name of my data set.</p>
  
  <p>Next to my search field, I have a drop down with a list of options that I would like to search by. </p>
  
  <p>For e.g I want to be able to search by data name, date, mission, etc. So when i click "Mission" from the drop box, any string I type in the search box will show data based should be based on mission.</p>
  
  <p>Here are some snippets of code that can be helpful :</p>
  
  <pre><code>//search-pipe
  export class SearchPipe implements PipeTransform {
    transform(data: any, search_term: any): any {
        if (search_term === undefined) return data;
  
        else {
          return data.filter(function (data){
                return data.mission.toLowerCase().includes(search_term.toLowerCase());
          })
        }
    }
  
  
  //where I apply the filter
  
  &lt;tbody *ngFor="let test of abtest | searchPipe:search_term"&gt;...&lt;/tbody&gt;
  
  //search box with drop down
  
  &lt;form&gt;
    &lt;div class="mdl-textfield mdl-js-textfield"&gt;
      &lt;div class="mdl-select mdl-js-select"&gt;
        &lt;select class="mdl-select__input"
                id="option"
                name="option"
                #select
          &lt;option *ngFor="let option of options" [value]="option"&gt;{‌{option}}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
        &lt;i class="mdl-textfield__icon material-icons"&gt;search&lt;/i&gt;
        &lt;input id="tf1"
               type="text"
               class="mdl-textfield__input mdl-shadow--2dp"
               #input
               (input) = "update.emit(input.value)"
               (keyup)="0" /&gt;
        &lt;label for="tf1" class="mdl-textfield__label"&gt;Search&lt;/label&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  
  //app.html
  &lt;app-search (update)="search_term =$event"&gt;&lt;/app-search&gt;
  &lt;app-show-data [search_term]="search_term"&gt;&lt;/app-show-data&gt;
  </code></pre>