title: Angular: Failing to implement a search pipe
body: <p>I was following the following answer <a href="https://stackoverflow.com/a/47738717/12360035">https://stackoverflow.com/a/47738717/12360035</a> and I tried to implement the code in my own solution, but it seems to fail. In my configuration there's a list of users generated and on top of that field there's a search bar used for searching users. Please see code for more information.
  My search.pipe.ts:</p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'search'
  })
  export class SearchPipe implements PipeTransform {
  
    transform(value: any, args?: any): any {
  
      if(!value)return null;
      if(!args)return value;
  
      args = args.toLowerCase();
  
      return value.filter(function(item){
          return JSON.stringify(item).toLowerCase().includes(args);
      });
  }
  
  }
  </code></pre>
  
  <p>users.component.html:</p>
  
  <pre><code>...
  &lt;div class="col-lg-12"&gt;
  
      &lt;p class="list-header"&gt;Element overview&lt;/p&gt;
  
      &lt;div class="form-group"&gt;&lt;!--
        &lt;label for="filter" class="lb-sm"&gt;Filter&lt;/label&gt; --&gt;
        &lt;input type="text" class="form-control input-sm" name="filter" placeholder="Filter" id="filter" [(ngModel)]="query"&gt;
      &lt;/div&gt;
  
     &lt;select name="userSelect" size="20" multiple class="form-control" id="elementlist" [(ngModel)]="selectedItem" (change)="clickItem($event.target.value)"&gt;
      &lt;option *ngFor="let user of users | search: query" value="{{user.firstname}}"&gt;
          {{user?.lastname}}, {{user?.firstname}}
        &lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  ...
  </code></pre>
  
  <p>My users.component.ts:</p>
  
  <pre><code>...
  export class UsersComponent implements OnInit {
  
    public search:any = '';
  ...
  </code></pre>
  
  <p>I get the error <code>Identifier 'query' is not defined. The component declaration, template variable declarations, and element references do not contain such a member</code> two times - at ngModel and in the ngFor pipe.
  Also the searchable items are last names and first names so they start with a capital letter.</p>
  
  <p>** UPDATE **
  My JSON received from my BackEnd is the following:</p>
  
  <pre><code>[{"_id":"5df0f0dbb97cfc2f3c4b6381","firstname":"Chad","lastname":"Johnson","password":"$2b$10$Dk09I8Qtgb/x76kqD/8are/4l/ir4Rp1vVS9DFp5T6lIGw0ldLu/O","eMail":"chad@johnson.com","active":true,"__v":0},{"_id":"5df8ba0f99a34e2070aad054","firstname":"John","lastname":"Smith","password":"$2b$10$Szcw9PZfoYA.lIA843.wt.HE99vQhoWdnMdFmlWUXFgcsdZ8sEvri","eMail":"john@smith.com","active":true,"__v":0},{"_id":"5e15da927932c92e448c3574","firstname":"Maret","lastname":"Smith","password":"$2b$10$0cd7qTf0k9NNICfiVF1ddu/w0XftGU2EkYMXZlIuEj06hd8SU1qle","eMail":"maret@smith.com","active":true,"__v":0}]
  </code></pre>
  
  <p>What am I doing wrong?</p>