How to make a filter component with angular 8

Question

all good? I’m having a hard time creating a filter on my site.

The problem is, I created a specific component with the input and another that receives the list of items, I need to do the search in the field (input) and below filter the searched item

my input html component is like this

<input 
            class="form-control form-control-sm form-control-mb"
            id=search 
            name="search" 
            (keyup)="pesquisarDrink($event)"
            placeholder="Encontre o melhor drink para sua festa!" 
            type="search">

my ts input is like this

pesquisarDrink(event) {
    const bebida = event.target.value;
    this.valueSearch.emit(bebida);
  }

I did this way at the beginning to bring the results

in the item component, I called the following function:

<header (valueSearch)='pesquisarDrink($event)'></header>

I’m very lost in it, if anyone can help me, I would be immensely grateful.

Follows Cod from git https://github.com/guimaraesSalgado/drinksApp (if you want to understand better

Answer 1

In your case for having an input in one component and you need the result of it in another component that has no relation I believe that the best would be to have a service to make this communication with a behaviorSubject.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {    
  private inputSubject = new BehaviorSubject<string>('');

  constructor() { }

  atualizarValorInput(value: string){
    this.inputSubject.next(value);
  }

  getInputValue(){    
     return this.inputSubject.asObservable();
  }

}

Header.ts

  pesquisarDrink(event) {
    const bebida = event.target.value;
    this.dataService.atualizarValorInput(bebida);
  }

Header.ts

  pesquisarDrink(event) {
    const bebida = event.target.value;
    this.dataService.atualizarValorInput(bebida);
  }

Page ts.

  ngOnInit() {      
    this.dataService.getInputValue.pipe(
        switchMap(inputValue=>this.bebidaService.get(inputValue))
    ).subscribe(res => {
      this.list = res.drinks;
      console.log(res);
    });
  }