Challenge: Displaying Data from a REST API

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: