Angular Get Consumindo API

Alefbacelar
2 min readOct 26, 2022

--

#Parte5 #Crud #GET

Olá pessoal, hoje iremos fazer um get para pegar as informações da nossa lista na API REST que simulei no ultimo artigo, para quem não sabe como simular segue o link abaixo:

Agora vamos abrir nosso projeto angular, e vamos rodar o comando abaixo:

json-server --watch db.json

Agora dentro de home vamos criar uma pasta chamada ‘services’

No terminal vamos entrar na pasta services e digitar o seguinte comando “ng g s home”

E assim será criado nosso serviço. Dentro do nosso home.service.ts vamos criar uma função que se comunique com a nossa url.

Agora no nosso app.module.ts / Vamos adicionar nos imports o httpClientModule

No nosso home.component.ts / vamos chamar o serviço pelo constructor e vamos criar uma função chamada getList().

Agora daremos um console log no “resposta” e esse será nosso retorno no inspecionar da web

Em seguida como já sabemos que está tudo ok, vamos adicionar nosso ngIf no html e chamar o nome e o sobrenome para nossa tabela.

E nossa tela vai ficar dessa forma:

No próximo artigo vamos criar um botão para adicionar, mais pessoas na nossa lista.

--

--