Challenge: Displaying Data from a REST API
Learn to consume data from an array using the HttpClientModule in Angular and display the data in the template using a table.
Challenge description
In this challenge, we’ll use HttpClientModule
, Providers
, and dependency injection in Angular. We’ll follow the steps below:
Step 1: Generate a new service
First, we’ll start with generating a new service file called user
. Inside this file, we use the GET request in the HttpClient
to consume static data from an array of objects by creating a function. The static data is located in the assets
folder. Inside this folder, we have our data saved as db.json
.
Step 2: Inject the HttpClientModule
All we need to do in this step is inject the HttpClientModule
in our app.module.ts
file.
Step 3: Implement the Data
To implement the data, we move to our app.component.ts
file, where we import UserService
and create a function that gets the data.
Step 4: Displaying data in a table
Here, we head to our template file called app.component.html
. In this file, we loop through our data using the *ngFor
directive in Angular to display the name, email, city, street, and website. All this information is available in our db.json
file. In the end, our page should look as follows:
Get hands-on with 1200+ tech skills courses.