Utilizando o Resource API do Angular 19 em um pequeno buscador

import { createServer } from 'node:http';
import url from 'url';
import carros from './dados.json' with { type: 'json' };

function delay(atrasoEmMS = 1000) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(), atrasoEmMS);
  });
}

const server = createServer(async (req, res) => {
  // Esse atraso (delay) é proposital para facilitar a
  // análise no frontend.
  await delay();

  const parsedUrl = url.parse(req.url, true);
  const palavraPesquisada = parsedUrl.query['q']
    .trim()
    .toLocaleLowerCase();

  const cabecalhosResposta = {
    'Content-Type': 'application/json; charset=utf-8',
  };

  // Se o valor da query string `q` for `erro`,
  // devolvemos o http status 500
  if (palavraPesquisada === 'erro') {
    res.writeHead(500, cabecalhosResposta);
    res.end(JSON.stringify({ mensagem: 'Erro na API' }));
    return;
  }

  const carrosFiltrados = carros.filter((a) =>
    a.nome.toLocaleLowerCase().includes(palavraPesquisada),
  );

  res.writeHead(200, cabecalhosResposta);
  res.end(JSON.stringify(carrosFiltrados));
});

server.listen(3000, () => console.log('Servidor online'));

[
  {
    "id": 1,
    "nome": "Toyota Corolla",
    "descricao": "Sedan compacto confiável e eficiente."
  },
  {
    "...": "...outros registros..."
  },
  {
    "id": 49,
    "nome": "Volvo XC90",
    "descricao": "SUV de luxo com foco em segurança."
  },
  {
    "id": 50,
    "nome": "Lexus RX",
    "descricao": "SUV premium com design refinado."
  }
]

import { Component } from '@angular/core';
import {
  BuscadorComponent
} from './buscador/buscador.component';

@Component({
  selector: 'app-root',
  imports: [BuscadorComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {}

<div class="container">
  <div class="row">
    <div class="col">
      <app-buscador></app-buscador>
    </div>
  </div>
</div>

html, body { height: 100%; }

body {
  display: flex;
  margin: 0;
  width: 100vw;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.container {
  width: 100vw;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 auto;
  padding: 15px;
}

export interface Carro {
  id: number;
  nome: string;
  descricao: string;
}

import { CommonModule } from '@angular/common';
import {
  AfterViewInit,
  Component,
  computed,
  effect,
  ElementRef,
  inject,
  resource,
  ResourceRef,
  signal,
  viewChild,
} from '@angular/core';
import {
  MatFormFieldModule
} from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import {
  MatProgressBarModule
} from '@angular/material/progress-bar';
import {
  MatSnackBar,
  MatSnackBarModule,
} from '@angular/material/snack-bar';
import {
  debounceTime,
  distinctUntilChanged,
  fromEvent,
  map,
} from 'rxjs';
import { Carro } from '../carro';

@Component({
  selector: 'app-buscador',
  imports: [
    CommonModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatProgressBarModule,
    MatSnackBarModule,
  ],
  templateUrl: './buscador.component.html',
  styleUrl: './buscador.component.scss',
})
export class BuscadorComponent implements AfterViewInit {
  palavraPesquisada = signal<string | null>(null);
  inputBuscador =
    viewChild.required<ElementRef<HTMLInputElement>>(
      'buscador',
    );

  private snackBar = inject(MatSnackBar);

  carrosResource: ResourceRef<Carro[]> = resource({
    request: () => ({
      palavraProcurada: this.palavraPesquisada(),
    }),
    loader: async ({ request, abortSignal }) => {
      const { palavraProcurada } = request;
      const efetuarConsulta =
        palavraProcurada !== null &&
        palavraProcurada.length >= 3;

      if (!efetuarConsulta) {
        return Promise.resolve([]);
      }

      const url = new URL('', 'http://localhost:3000');
      url.searchParams.append('q', palavraProcurada);

      const resposta = await fetch(url, {
        signal: abortSignal,
      });

      // A Promise retornada do fetch() não rejeitará o
      // status do erro HTTP, mesmo que a resposta seja
      // um HTTP 404 ou 500. Em vez disso, ela irá resolver
      // normalmente (com o status ok definido como falso),
      // e só irá rejeitar se houver falha na rede ou se
      // algo impedir a requisição de ser completada.
      //
      // https://developer.mozilla.org/pt-
      // BR/docs/Web/API/Fetch_API/Using_Fetch
      if (!resposta.ok) {
        const { mensagem } = await resposta.json();
        throw mensagem;
      }

      return resposta.json();
    },
  });

  estaCarregando = computed(() =>
    this.carrosResource.isLoading(),
  );

  resultadoBusca = computed(
    () => this.carrosResource.value() ?? [],
  );

  constructor() {
    effect(() => {
      const erro = this.carrosResource.error();
      if (erro) {
        const mensagem =
          typeof erro === 'string' ? erro : 'Erro genérico';

        this.snackBar.open(mensagem, '', { duration: 3e3 });
      }
    });
  }

  ngAfterViewInit(): void {
    this.escutarEventoInputBusca();
  }

  escutarEventoInputBusca() {
    fromEvent(this.inputBuscador().nativeElement, 'input')
      .pipe(
        // Aguarda 250ms após a última alteração de valor
        // do input, antes de emitir o evento.
        debounceTime(250),
        // Abaixo propagamos somente o `.value` do input
        map((event) =>
          (event.target as HTMLInputElement).value.trim(),
        ),
        // Emite o evento somente quando houver uma
        // alteração de valor.
        // A ideia é que o "trim()" em conjunto com
        // o `distinctUntilChanged`, evite disparar
        // consultas quando o usuário adicionar um
        // espaço no final da palavra buscada.
        distinctUntilChanged(),
      )
      .subscribe((valorDoInputBuscador) => {
        // Por fim, atualizamos o `signal` palavraPesquisada.
        // Essa atualização fará com que o `carrosResource`
        // execute a função `loader`.
        this.palavraPesquisada.set(valorDoInputBuscador);
      });
  }
}

<div class="row">
  <div class="col">
    <mat-form-field style="width: 100%">
      <mat-label>Buscador:</mat-label>
      <input
        #buscador
        matInput
        type="text"
        type="search"
        autofocus />
    </mat-form-field>
    @if (estaCarregando()) {
      <mat-progress-bar
        mode="indeterminate"></mat-progress-bar>
    } @else {
      <p>
        Quantidade de registros encontrados:
        <strong>{{ resultadoBusca().length }}</strong>
      </p>
      <mat-list>
        @for (carro of resultadoBusca(); track carro.id) {
          <mat-list-item>
            <mat-icon
              matListItemIcon
              fontIcon="directions_car"></mat-icon>
            <div matListItemTitle>{{ carro.nome }}</div>
            <div matListItemLine>{{ carro.descricao }}</div>
          </mat-list-item>
        } @empty {
          <p>Nenhum registro encontrado!</p>
        }
      </mat-list>
    }
  </div>
</div>