title: Angular 7: Filter Search Results On Multiple Keys Using Async Pipe
body: <p>I would like to know how to filter on search results using more than one object property using the async pipe. Currently, I'm able to filter based on the name property and display the filtered results, but I would also like to be able to search on the username property as well. Here's what I have so far:
  In my TS file:</p>
  
  <pre><code>  public formSetup = this.fb.group({
      formSearch: new FormControl('')
    })
  
    constructor(private service: Service,
                private fb: FormBuilder) { }
  
    ngOnInit(): void {
     this.getFilters();
    }
  
    public getFilters() {
  
      const filter = (val: string): Observable&lt;Array&lt;object&gt;&gt; =&gt; {
  
        return this.service.getItems()
          .pipe(
            map(response =&gt; response.filter(option =&gt; {
              const value = `${option.name}`
              return value.toLowerCase().indexOf(val.toLowerCase()) === 0;
            }))
          );
  
      }
  
      this.filteredItems = this.formSetup.get('formSearch').valueChanges
        .pipe(
          startWith(null),
          debounceTime(200),
          distinctUntilChanged(),
          switchMap(val =&gt; {
            return filter(val || '');
          })
        );
    }
  </code></pre>
  
  <p>In my HTML file: </p>
  
  <pre><code>  &lt;input type="text" formControlName="formSearch"&gt;
  &lt;/div&gt;
  
  &lt;search [items]="filteredItems"&gt;&lt;/search&gt;
  </code></pre>
  
  <p>And finally, in my component that's displaying the results:</p>
  
  <pre><code>&lt;search-card *ngFor="let item of (items | async ); trackBy:trackingFn" [items]="item"&gt;&lt;/search-card&gt;
  </code></pre>