How to consume a REST API from angular

Sat, Feb 15, 2020

Read in 2 minutes

Introduction

In this post, we will explore how to consume a REST-API from angular UI. For this demo purpose instead of calling a REST endpoint , we will make a call to the local JSON file saved in my system.

Install node and install angular CLI. If you need a reference please refer Detailed Introduction to Angular

create angular App– ng new consumeAPI

To run the App– ng serve or npm start

Copy the below JSON in your assets folder.

{
    "block": [
      {
        "id":"1",
            "key":"PersonalBlock",
            "description":"Personal Information",
            "Elements":[
                {
                    "id":"2",
                    "key":"name",
                    "description":" Name",
                    "type":"textbox"
                },
                {
                    "id":"3",
                    "key":"dob",
                    "description":"Date of Birth",
                    "type":"date"
                },
                {
                    "id":"4",
                    "key":"gender",
                    "description":"Gender",
                    "type":"dropdown",
                    "possibleValues":["Female","Male","others"]
                }
            ]
      },
      {
        "id":"2",
        "key":"ProfessionalBlock",
        "description":"Professional Information",
        "Elements":[
            {

                "id":"5",
                "key":"company",
                "description":" Company",
                "type":"textbox"
            },
            {
                "id":"6",
                "key":"position",
                "description":"Position",
                "type":"date"
            },
            {
                "id":"7",
                "key":"employmenttype",
                "description":"Employeement Type",
                "type":"dropdown",
                "possibleValues":["FullTime","PartTime","Contract"]
            }
        ]
      }
    ]
  }

To consume a web service, you should import HttpClient in your component.

app.component.ts

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'ConsumeAPI';
  url = 'assets/data.json';
//url="https://reqres.in/api/users";
 private blockArr:object[];
  constructor(private http:HttpClient){
    }
    ngOnInit(){

      this.http.get<any>(this.url).subscribe(data => {
        console.log(data);
    this.blockArr = data;
    console.log(JSON.stringify(this.blockArr));
})
    }
}

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

OUTPUT

consumeRESTAPI