title: Filter pipe for async data in Angular 5
body: <p>I use a pipe to filter a table into which the data comes asynchronously from the server, and until the data arrives, the tunnel continuously returns undefined:
  <a href="https://i.stack.imgur.com/gK42Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gK42Y.png" alt="enter image description here"></a></p>
  
  <p>My pipe: </p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'filter',
    pure: false
  })
  export class FilterPipe implements PipeTransform {
      transform(items: any[], userName): any {
          console.log('Usernames', userName);
  
          return userName
              ? items.filter(item =&gt; item.displayUsername.indexOf(userName) !== -1)
              : items;
      }
  }
  </code></pre>
  
  <p>And where i use it:</p>
  
  <pre><code>&lt;input type="text"
  name="userName"
  [(ngModel)]="userName"&gt;
  
  &lt;div
   *ngFor="let user of (users | async | filter: userName );"
  &gt;
  </code></pre>
  
  <p>And this has a very bad effect on application performance.</p>
  
  <p>Maybe I understand the work of pipe is not entirely correct, but
  how do I rewrite a pipe so that it returns values only when the text is entered into the input?</p>