0

tudo bom? to tendo uma dificuldade para criar um filtro no meu site.

O problema é, eu criei um componente especifico com o input e outro que recebe a lista de itens, preciso fazer a pesquisa no campo pesquisa (input) e abaixo filtrar o item pesquisado

meu componente input html está assim

<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">

o meu ts input está assim

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

fiz desta forma no inicio para trazer os resultados

no componente de itens, chamei a seguinte função:

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

To bem perdida nisso, se alguem puder me ajudar, eu ficaria imensamente grata.

Segue cod do git https://github.com/guimaraesSalgado/drinksApp (caso queira entender melhor

1 Resposta 1

0

No seu caso por ter um input em um componente e você necessitar do resultado dele em outro componente que não tem nenhuma relação creio que o melhor seria ter um serviço pra fazer essa comunicação com um 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);
    });
  }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .