Tenho dúvida sobre como passar valores entre componentes pais no Angular, sendo eles o Header e o corpo da minha aplicação (uma Pokedex), pois estou tentando criar um campo de pesquisa funcional.
HTML do componente Header:
<header class="header-bar">
<span class="mypkdex" routerLink="/Pokemons">MyPokeDex</span>
<div class="search-bar">
<input
type="search"
name = "pokemonPesquisa"
placeholder="Digite o nome do pokemon..."
autofocus
[(ngModel)]="filter"
>
<button class="search-button" type="submit">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</div>
<br>
</header>
TS componente "Pokemons"
import { PokemonService } from './../pokemon.service';
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-pokemons',
templateUrl: './pokemons.component.html',
styleUrls: ['./pokemons.component.css']
})
export class PokemonsComponent implements OnInit {
@Input() public filtro : string = '';
public getAllPokemons : any;
constructor(
private service : PokemonService,
){ }
ngOnInit() {
this.service.listaPokemons().subscribe((pokemons) => {
if (this.filtro.trim().length > 0){
this.getAllPokemons = pokemons.results.filter((results) => {
return !results.name.indexOf(this.filtro.toLocaleUpperCase())
})
} else {
this.getAllPokemons = pokemons.results
}
//console.log(this.getAllPokemons)
})
}
}
Queria saber se tem como passar o valor do campo "Input" do Header para a variável "filtro" do componente TS "Pokemon".