How to send REST response to html in Angular ?

In this article, we will see how to send API responses using HttpClient Module to an HTML using Angular, along with understanding the basic implementation through the examples.

Angular is a JavaScript framework through which we can create reactive single-page web applications. For implementation, we are using the latest version of Angular (Angular 14) to handle HTTP. For Angular applications, the HTTP Client in @angular/common/HTTP provides a simplified client HTTP API that is based on the XMLHttpRequest interface provided by browsers. The testability features, typed request and response objects, request and response interception, Observable APIs, and simplified error handling are some further advantages of HttpClient. To retrieve data from the server and send it to our application, we need an HTTP client.

Before we proceed with the installation process, we should have NodeJS  & NPM (Node Package Manager) installed in our system. If not, please refer to the Installation of Node.js on Windows or Linux article for the detailed installation procedure.

Steps for sending the REST response in Angular:

Step 1: Angular Installation using NPM

Install Angular with the help of NPM to install:

npm install -g @angular/cli

Step 2: Create a New Project

In angular, we need to use ng new project_name for creating a new project. 

ng new api_response

Step 3: Importing HttpClientModule for request and response

For Configuring HttpClient, we need to Import the HttpClientModule into src/app/app.module.ts.

• app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } 
    from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, 
              FormsModule, 
              HttpClientModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Step 4: Using HttpClient in the app.component.ts file

We need to use HttpClient for requesting an API Call for getting some data in response.  First, We are creating private variable httpClient of HttpClient type using the constructor.  Then, create one method for calling API using the GET method and storing the response in the results variable. Calling this method in ngOnInit() for loading gets a response when the page loads.

• app.component.ts:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    title = 'GeeksForGeeks API Response';

    results: any;
    constructor(private http: HttpClient) {
    }

    ngOnInit(): void {
        this.getApiResponse();
    }

    getApiResponse() {
        this.http.get(
        // API Link
        'https://.../products').subscribe((response) => {
            this.results = response;
        });
    }
}

Step 5: Showing Data in Table format

We are using fake store API for getting a list of products or an array of products. Each product has some properties such as id, title, price, description, category, and rating. Below, add the image of one product object.

We have an array of products with similar product properties. Using ngFor loop for showing response data in HTML file. We are using the below-mentioned API for getting data.

API Link: You can use any API link. For example - https://.../products

• app.component.html:

<div class="container mt-5">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Title</th>
                <th scope="col">Price</th>
                <th scope="col">Description</th>
                <th scope="col">Category</th>
                <th scope="col">Rating</th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let result of results">
                <tr>
                    <th scope="row">{{ result.id }}</th>
                    <td>{{ result.title }}</td>
                    <td>{{ result.price }}</td>
                    <td>{{ result.description }}</td>
                    <td>{{ result.category }}</td>
                    <td>{{ result.rating['rate'] }}</td>
                </tr>
            </ng-container>
        </tbody>
    </table>
</div>

Output: