title: Pipes angular 2 filter multiple columns considering null value
body: <p>I am using pipe to filter data on three different columns in a data table.
  The names of the column are <code>category</code>, <code>name</code>,<code>department</code>.</p>
  
  <p>I am passing the arguments as follows:</p>
  
  <pre><code>&lt;table class="table table-striped"  [mfData]="listdata | dataFilter : filtername : filterDep : filterCategory"&gt;
  </code></pre>
  
  <p>I have <code>*ngFor</code> loop:</p>
  
  <pre><code>&lt;tr *ngFor="let item of mf.data; let i =index"&gt;
      &lt;td&gt;
          {{i+1}}
      &lt;/td&gt;
      &lt;td&gt;{{ item.name }}&lt;/td&gt;
      &lt;td&gt;{{item.department}}&lt;/td&gt;
      &lt;td&gt;{{item.category}}&lt;/td&gt;
  
  &lt;/tr&gt;
  </code></pre>
  
  <p>The code which sets the query variable is</p>
  
  <pre><code>&lt;th colspan="2"&gt;
      Filter by name:
      &lt;input class="form-control" [(ngModel)]="filtername" (input)="change()" /&gt;
  &lt;/th&gt;
  &lt;th colspan="1"&gt;
      Filter by Department:
      &lt;input class="form-control" [(ngModel)]="filterDep" (input)="change()" /&gt;
  &lt;/th&gt;
  &lt;th colspan="1"&gt;
      Filter by Category:
      &lt;input class="form-control" [(ngModel)]="filterCategory" (input)="change()" /&gt;
  &lt;/th&gt;
  </code></pre>
  
  <p>I have data in which some of the <code>category</code> is <code>null</code>.</p>
  
  <p>The pipe which I am using is:</p>
  
  <pre><code>@Pipe({
     name: "dataFilter"
  })
  export class DataFilterPipe implements PipeTransform {
  
      transform(array: any[], query: string, query2: string, query3: string): any {
  
          let notNullCategory = _.reject(array, ['category', null]);
  
          if (query || query2 || query3) {
  
              return _.filter(notNullCategory, row =&gt; ((row.name.indexOf(query) &gt; -1) &amp;&amp; (row.department.indexOf(query2) &gt; -1) &amp;&amp; (row.category.indexOf(query3) &gt; -1)));
  
          }
          return array;
      }
  }
  </code></pre>
  
  <p>This way if the user makes the search with some <code>name</code> only the rows which have non null values of <code>category</code> are considered.</p>
  
  <p>I want to take in consideration the rows with null values as well , but I am unable to do so.</p>
  
  <p>If I change my pipe to:</p>
  
  <pre><code>@Pipe({
      name: "dataFilter"
  })
  export class DataFilterPipe implements PipeTransform {
  
      transform(array: any[], query: string, query2: string, query3: string): any {
          if (query || query2 || query3) {
  
              return _.filter(array, row =&gt; ((row.name.indexOf(query) &gt; -1) &amp;&amp; (row.department.indexOf(query2) &gt; -1) &amp;&amp; (row.category.indexOf(query3) &gt; -1)));
  
          }
          return array;
      }
  }
  </code></pre>
  
  <p>I get the error:</p>
  
  <pre><code>Cannot read property 'indexOf' of null
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>