Angular: buscando, filtrando e exibindo dados de uma API

Buscando passagens - Apresentação

Olá, estudante! Boas-vindas a mais um curso de Angular. Eu sou o Diego Carlos e serei seu instrutor.

Audiodescrição: Diego é um homem de pele negra, cabelos crespos, curtos e pretos. Usa óculos de armação arredondada preta, uma camiseta preta e está sentado em uma cadeira gamer. Ao fundo, uma parede lisa com iluminação degradê do roxo ao azul.

No curso anterior, construímos a tela de início com promoções e depoimentos do Jornada Milhas, uma plataforma de venda de passagens aéreas. Além disso, também aprendemos a criar as telas de perfil e cadastro do usuário.

Agora, vamos trabalhar com a tela de busca, onde mostraremos as passagens e também implementar a opção de filtro.

Para isso, utilizaremos o serviço de formulário para obter informações, integrar com o formulário externo, ou seja, o filtro, e assim conseguir filtrar as passagens desejadas.

Pré-requisitos

Para avançar nessa jornada, é interessante que você já tenha conhecimento em TypeScript, uma base sólida de Angular, além de HTML e CSS.

Se você tiver todos esses pré-requisitos, vamos juntos para a primeira aula do curso!

Buscando passagens - Criando componente de busca

Queremos realizar a busca de passagens, para isso, precisamos de um componente. É isso que faremos agora!

Criando o componente busca

Com o projeto aberto no VS Code, abrimos o terminal com o atalho "Ctrl + "". Criaremos um componente usando os comandos do Angular CLI.

Então, passamos ng g c seguido do caminho no qual queremos que seja criado. Nesse caso será na pasta pages/busca. Após, apertamos "Enter".

ng g c pages/busca

Feito isso, os arquivos necessários são criados e declarados no módulo principal da aplicação. Além disso, para otimizarmos tempo, copiamos o html que já está pronto e colamos em busa.component.html.

<div class="busca-page">
        <app-banner src="assets/imagens/banner-busca.png" alt="" /> 
        <app-container>
                <app-form-busca></app-form-busca>
                <section class="conteudo">
                        Filtros, Cards de Recomendados e Cards de Passagens
                </section>
        </app-container>
</div>

Feito isso, abrimos o arquivo busca.component.scss e colamos o seguinte código:

.busca-page {
    app-banner {
        margin-bottom: 40px;
    }

    .conteudo {
        display: flex;
        gap: 24px;
    }

    .passagens {
        flex-grow: 1;

        .destaques {
            display: flex;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 32px;

            app-card {
                flex-grow: 1;
            }
        }
    }
}

Tudo pronto. Agora, vamos rodar a aplicação passando o comando ng serve no terminal, seguido de "Enter".

ng serve

Além de criar o componente, também precisamos criar a rota para que possamos acessar o componente.

Então, no explorer, acessamos app-routing.module.ts. Dentro do array que possui as rotas, na linha 27, criaremos mais um objeto. Escrevemos path: 'busca', na linha abaixo passamos component: BuscaComponent.

//Código omitido

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'cadastro',
    component: CadastroComponent
  },
  {
    path: 'perfil',
    component: PerfilComponent,
    canActivate: [authGuard]
  },
  {
    path: 'busca',
    component: BuscaComponent
  }
];

//Código omitido

Para verificar se está funcionando, abrimos o navegador e passamos o caminho "localhost:4200/busca". Feito isso temos nosso componente de busca.

Lembre-se sempre se salvar todas as alterações. Ao acessar o caminho tivemos um erro justamente porque o app-routing.module não havia sido salvo.

Nos vídeos seguintes continuaremos aprimorando esse componente de exibição das passagens. Até lá!

Buscando passagens - Navegando com os dados

Já construímos o componente de busca, porém ainda há um detalhe que não está correto. Vamos verificar.

No navegador, acessamos "localhost:4200". Perceba que ao fazer isso acessamos a home, porém, não conseguimos clicar nos links da navegação.

O comportamento esperado seria que, após realizar uma busca no formulário, a aplicação nos redirecionasse para essa tela de procura. Vamos corrigir isso.

Corrigindo o redirecionamento de busca

form-busca.component.ts

Abrimos o VS Code. No Explorer, acessamos "app > shared > form-busca" e abrimos o arquivo form-busca.component.ts.

Precisamos enviar as informações do formulário para o componente de busca. Para isso, usaremos o decorador Output, usado para enviar informações de um componente para outro.

Acima do construtor, na linha 10, escrevemos @Output realizarBusca igual à new EventEmitter(). Isso permitirá com que possamos emitir esse evento e que ele seja ouvido pelo nosso componente pai.

Precisamos fazer a importação, para isso, clicamos em @Output() e selecionamos a opção "Update import from "@angular/core". Fazemos o mesmo com o EventEmitter().

Emitiremos essas informações quando o botão busca for clicado. Então, no método de busca, na linha 16, escrevemos this.realizarBusca.emit(). Feito isso, emitiremos algo.

Nesse caso, queremos emitir os valores do formulário. Então, ao invés de executar o console da linha 15 o apagamos e passamos const formBuscavalue que receberá this.formBuscaService.formBusca.value.

Feito isso, na linha 16, passamos como parâmetro do emit() o formBuscavalue.

import { Component, EventEmitter, Output } from '@angular/core';
import { FormBuscaService } from 'src/app/core/services/form-busca.service';

@Component({
  selector: 'app-form-busca',
  templateUrl: './form-busca.component.html',
  styleUrls: ['./form-busca.component.scss']
})
export class FormBuscaComponent {
  @Output() realizarBusca = new EventEmitter();
  constructor(
    public formBuscaService : FormBuscaService) {}

  buscar () {
    const formBuscaValue = this.formBuscaService.formBusca.value
    this.realizarBusca.emit(formBuscaValue);
  }
}

Agora, precisamos criar esse método dentro do componente home. Para isso, no Explorer, acessamos "app > pages > home" e abrimos o arquivo home.component.html.

home.component.html

Na tag <app-form-busca>, na linha 7, adicionamos parênteses e passamos realizarBusca. Em seguida, chamamos o evento, para isso adicionamos o sinal de igual e dentro de aspas duplas passamos navegarParaBusca() que recebe como parâmetro $event.

<section class "homepage">
    <app-banner
        src="assets/imagens/banner-homepage.png"
        alt="Banner da aplicação Jornada"
    ></app-banner>
    <app-container>
        <app-form-busca (realizarBusca)="navegarParaBusca ($event)"></app-form-busca>
        <h2>Promoções</h2>
        <app-promocoes />
        <h2>Depoimentos</h2>
        <app-depoimentos />
    </app-container>
    <app-banner
        src="assets/imagens/banner-homepage-rodape.png"
        alt="Banner da aplicação Jornada"
    ></app-banner>
</section>

Agora, precisamos criar esse método no home.component.ts.

home.component.ts

Na linha 21, criamos o método navegarParaBusca() e passamos como parâmetro ev: any. Precisamos mandar esse método para busca.component.

Então, na linha 12, precisamos chamando as rotas, para isso escrevemos private router: Router.

Na linha 27, escrevemos this.router.navigate() e passamos como parâmetro ['busca'] e salvamos.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { PromocaoService } from 'src/app/core/services/promocao.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  constructor(
    private servicoPromocao: PromocaoService,
    private router: Router
  ) {

  }
  ngOnInit(): void {
    this.servicoPromocao.listar()
      .subscribe(
        resposta => {
          console.log(resposta)
        }
      )
  }
  navegarParaBusca(ev: any) {
    this.router.navigate(['busca']);
  }
}

Vamos verificar se deu certo. Abrimos o navegador e clicamos no botão "Busca". Feito isso, somos redirecionados para a página de busca.component. Isso significa que deu certo!

Sobre o curso Angular: buscando, filtrando e exibindo dados de uma API

O curso Angular: buscando, filtrando e exibindo dados de uma API possui 91 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Buscando passagens
• Validando e obtendo dados de um formulário Angular
• Filtrando busca de passagens
• Filtrando por preço
• Refinando a busca