title: angular 6 filter the async pipe results
body: <p>I use angular 6 and I would like to filter the results of an async pipe, before rendering them in the UI.</p>
  
  <p>Here is my code right now </p>
  
  <pre class="lang-js prettyprint-override"><code>this.results = this.form.get('name').valueChanges.pipe(           
    filter(formdata =&gt; formdata.name.length &gt; 0), 
    switchMap( formdata =&gt; this.service.getNames(formdata.name)) 
  );
  </code></pre>
  
  <p>and the template</p>
  
  <pre class="lang-html prettyprint-override"><code>  &lt;div *ngIf='results | async ; let items'&gt;
         &lt;div *ngFor='let item of items'&gt;{{item.id}} {{item.name}} &lt;/div&gt;               
    &lt;/div&gt; 
  </code></pre>
  
  <p>From the pipe I get some ids and names. I already have an array of ids. I would like to filter the ids of the pipe and not render the ones that are already in the array. </p>
  
  <p>So, here is what I try to do. </p>
  
  <pre class="lang-js prettyprint-override"><code>array = [{id:1,name:'one'},{id:2,name:'two'}];//I already have this
  </code></pre>
  
  <p>new version of filter in pipe</p>
  
  <pre class="lang-js prettyprint-override"><code>this.results = this.form.get('name').valueChanges.pipe(           
    filter(formdata =&gt; formdata.name.length &gt; 0), 
    switchMap( formdata =&gt; this.service.getNames(formdata.name)) ,
    filter(checkIfResultIdInArray())//pseudocode
  );
  </code></pre>
  
  <p>Assume that <code>checkIfResultIdInArray</code> is I function I created. Filters and returns all the ids that are not in the <code>array</code>. So the ids/names that end up in the template are not the <code>{id:1,name:'one'},{id:2,name:'two'}</code>.</p>
  
  <p>Or maybe I can filter in the template somehow? </p>