0

Busca por Id Angular 8 (Básico)

Aluizio Junior
Aluizio Junior

Neste artigo vamos fazer uma requisição get() para recuperar um registro pelo seu Id.

Aqueles que acompanharam os últimos três artigos, vão perceber que o que temos por aqui, nada mais é do que uma junção dos mesmo para um novo propósito: “Buscar registros por Id”, de uma maneira simples e para fins didáticos.


1 – Crie o servidor json-server descrito aqui:

https://web.digitalinnovation.one/articles/simulando-um-servidor-com-json-server-basico?back=%2Farticles&page=1&order=oldest


2 – Crie um projeto Angular.

ng new angular-teste


3 – Pelo VSCode, vamos criar um componente:

ng g c home


4 – No template vamos precisar de um input e um botão:

<!-- Através do “idBuscado” vamos ter acesso ao valor do input”-->
Id: <input [(ngModel)]="idBuscado" type="text">

<!-- Ao clicar no botão, chame o “buscarId()”-->
<button (click)="buscarId()">Botão</button>


4 – Em “home.component.ts”, vamos criar a variável e a função com os mesmos nomes que foram dados no .html:

export class HomeComponent implements OnInit {
constructor() { }

idBuscado: any;
buscarId(){
  alert("Fui clicado e o valor do input é: " + this.idBuscado)
}


5 – Importe o “FormsModule” no import do “app.module.ts”

imports: [
  BrowserModule,
  FormsModule // O ngModule precisa dele
],


Mais sobre ngModule em: https://angular.io/guide/ngmodules


6 – Apague o conteúdo do app.component.html e coloque o seletor do nosso “home.component.ts” nele:


O botão e o input já estão funcionando:



7 – Agora vamos cuidar do serviço de requisição. Caso você ainda não tenha o arquivo “db.json” dentro da pasta raiz do seu projeto, crie-o e coloque o seguinte conteúdo:

{
  "usuarios":[
    {
      "id": 1,
      "nome": "admin"
    },
    {
      "id": 2,
      "nome": "aluizio"
    }
  ]
}


8 – Vamos gerar uma classe de service, dentro de uma pasta chamada “core”, para realizar-mos a requisição que vai nos retornar um objeto do tipo usuários:

ng g s core/usuario


9 – Nosso serviço vai retornar um objeto usuário, portanto crie uma interface para este objeto como o comando: “ng g i shared/models/usuario” e adicione o seguinte código:

export interface Usuario {
  id: number;
  nome: string;
}


Agora vamos trabalhar em nossa classe de serviço.


10 – Vamos criar o url de acesso ao servidor e o método “buscarId()”. O código da nossa classe fica assim:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Usuario } from '../shared/models/usuario';

@Injectable({
  providedIn: 'root'
})
  
export class HomeService {
  private readonly url = 'http://localhost:3000/usuarios/';
  
  constructor(private http: HttpClient) { }
  
  buscarId(idBuscado: number){
    return this.http.get<Usuario>(this.url + idBuscado);
  }
}


A novidade aqui é que o nosso método vai receber o parâmetro que vem do input para poder concatená-lo no final da url.


Nosso “get()” foi tipado para retornar somente um Usuário por vez.


Foi também, acrescentado uma barrinha em “...usuário/” lá na declaração da url. Coisa boba mas ressaltar isto pode evitar dores de cabeça.


Para mais informações sobre o que foi feito até aqui, veja o artigo sobre listagem em:

https://web.digitalinnovation.one/articles/realizando-uma-requisicao-get-no-angular-8?back=%2Farticles&page=1&order=oldest


11 – Importe o módulo "HttpClientModule" no “app.module.ts”:

imports: [
  BrowserModule,
  AppRoutingModule,
  FormsModule,
  HttpClientModule
],


12 – Vamos para o nosso “home.component.ts”. Aqui vamos declarar a classe de serviço no construtor para que seja possível acessar o “servico.buscaId()” e vamos criar uma variável do tipo usuário. Esta variável vai armazenar o retorno da nossa requisição e é ela que vamos usar para exibir este retorno no template:

import { Component } from '@angular/core';
import { HomeService } from '../core/usuario.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  
  constructor(private servico: HomeService) { }
  
  idBuscado: any;
  usuario: any;
  
  buscarId(){
    this.servico.buscarId(this.idBuscado).subscribe(objetos => this.usuario = objetos);
  }
    
}


13 – Agora, só precisamos exibir o usuário no template:

Id: <input [(ngModel)]="idBuscado" type="text">
<button (click)="buscarId()">Botão</button>
<ul *ngIf="usuario != null">
  <li>{{usuario.id}}</li>
  <li>{{usuario.nome}}</li>
</ul>



15 – inicie o json server com: “json-server - -watch db.json”, rode a aplicação com “ng serve” e o resultado esperado é este:


Pronto!


Artigo sobre json-server:

https://web.digitalinnovation.one/articles/simulando-um-servidor-com-json-server-basico?back=%2Farticles&page=1&order=oldest


Passagem de parâmetros do template para o component:

https://web.digitalinnovation.one/articles/como-pegar-dados-do-formulario-com-ngmodel-basico?back=%2Farticles&page=1&order=oldest


Requisição para listar informações:

https://web.digitalinnovation.one/articles/realizando-uma-requisicao-get-no-angular-8?back=%2Farticles&page=1&order=oldest


Materiais hard sobre os cursos de Angular:

https://web.digitalinnovation.one/articles/material-de-apoio-para-os-cursos-de-angular-8?back=%2Farticles&page=1&order=oldest








0
0

Comentários (0)

Entusiasta de Tecnologias Web

Brasil