Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Passar valores entre componentes pais

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.

Estrutura dos componentes "Header" e o corpo da aplicação "Pokemons"

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

1 resposta
solução!

Opa João, tudo certo?

Uma possível solução para esse caso é o uso da propriedade @Input e @Output, essa propriedade é utilizada para realizar a comunicação entre componentes. Sendo assim, recomendo dar uma olhada na seguinte aula do curso de Angular 14 que desenvolve essa comunicação entre componentes utilizando essa propriedade:

Fico à disposição.

Tenha um bom dia e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓