title: Angular 6: ERROR TypeError: el.toLowerCase is not a function
body: <p>I am creating a simple filter pipe in my app, here is what I have.</p>
  <p>filter component:</p>
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
      
      @Pipe({
        name: 'dataFilter'
      })
      export class DataFilterPipe implements PipeTransform {
      
        transform(value: any[], input: string) {
          if (input) {
              input = input.toLowerCase();
              return value.filter(function (el: any[]) {
                  return el.toLowerCase().indexOf(input) &gt; -1;
              });
          }
          return value;
      }
      
      }
  </code></pre>
  <p>here is componet.html</p>
  <pre><code>&lt;div class=&quot;card movies-list&quot; id=&quot;movies-list&quot;&gt;
    &lt;div class=&quot;card-header movies-list_header&quot;&gt;
      &lt;h1&gt;Content:  &lt;small&gt;Best movies of 2010's&lt;/small&gt;&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class=&quot;card-body&quot;&gt;
      &lt;div class=&quot;row movies-list_filter&quot;&gt;
        &lt;div class=&quot;col-md-2&quot;&gt;Filter By&lt;/div&gt;
        &lt;div class=&quot;col-md-4&quot;&gt;
          &lt;input type='text' [(ngModel)]=&quot;listFilter&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-md-6&quot;&gt;
          &lt;h1&gt;filterdbY: {{listFilter}}&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;table class=&quot;table table-striped table-responsive&quot;&gt;
        &lt;thead&gt;
          &lt;tr class=&quot;movies-list_tbheader&quot;&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;th&gt;Title&lt;/th&gt;
            &lt;th&gt;Realease&lt;/th&gt;
            &lt;th&gt;Rating&lt;/th&gt;
            &lt;th&gt;Description&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr class=&quot;movies-list_data&quot; *ngFor=&quot;let movie of movies | dataFilter:listFilter&quot;&gt;
            &lt;td&gt;
              &lt;img *ngIf=&quot;movie.poster_path&quot; class=&quot;thumbnail&quot; src=&quot;http://image.tmdb.org/t/p/w500/{{movie.poster_path}}&quot;&gt;
            &lt;/td&gt;
            &lt;td&gt;{{ movie.title }}&lt;/td&gt;
            &lt;td&gt;{{ movie.release_date }}&lt;/td&gt;
            &lt;td&gt;{{movie.vote_average}}&lt;/td&gt;
            &lt;td&gt;{{movie.overview}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and in component.ts I have declared the variable listFilter like this:</p>
  <pre><code>export class MoviesComponent implements OnInit {
    listFilter = '';
  
  -----------
  }
  </code></pre>
  <p>when I run my app and try to seach some text I get the following error</p>
  <blockquote>
  <p>ERROR TypeError: el.toLowerCase is not a function</p>
  </blockquote>
  <p>what is wrong with my code? any help will be apreciated</p>