How To Get Api Data In Angularjs

AngularJS | fetch information from API using HttpClient

There is some data in the API and our task here is to fetch data from that API using HTTP and display it. In this commodity, nosotros will use a case where the API contains employee details which we will fetch. The API is a fake API in which data is stored in the form of JSON (Key: Value) pair.
API : API stands for Awarding Programming Interface, which is a software intermediary that allows ii applications to communicate to each other.
Angular offers HttpClient to work on API and handle data easily. In this approach HttpClient forth with subscribe() method will be used for fetching information. The post-obit steps are to be followed to achieve the goal of problem.

Step i: Create the necessary component and application.
Step 2: Exercise the necessary imports for HttpClient in module.ts file.

import { HttpClientModule } from '@athwart/common/http';  @NgModule({   declarations: [   ],   imports: [            HttpClientModule,   ],   providers: [],   bootstrap: [] })

Step 3: Do the necessary imports for HttpClient in component.ts file.

import {HttpClient} from '@angular/common/http';  consign course ShowApiComponent implements OnInit {   constructor(private http : HttpClient){     }    }

Footstep 4: We get Response from API by passing API url in go() method and then subscribing to the url.

this.http.go('API url').subscribe(parameter)

The Response of the API is stored in a variable from which data can exist accessed.
Pace v: Now data assortment need to be showed using HTML. A Tabular array is used in which rows are added dynamically by the size of data array. For this, rows are created using *ngFor then data is showed from each row.

Prerequisite: Here you volition need an API for getting data. A fake API can also be created and data tin can be stored – "https://world wide web.mocky.io/".
Example: Here for example, nosotros already have a simulated API which contains employee data which nosotros will fetch
API: "http://www.mocky.io/v2/5ea172973100002d001eeada"
Steps to display the information:

Step one: Required Angular App and Component(Here bear witness-api component) is created
Footstep 2: For using HttpClient for our app, HttpClientModule is imported to app.module.ts
app.module.ts:

javascript

                import { BrowserModule } from                                '@angular/platform-browser'                ;              
                import { NgModule } from                                '@angular/core'                ;              
                import { HttpClientModule } from                                '@angular/common/http'                ;              
                import { AppRoutingModule } from                                './app-routing.module'                ;              
                import { AppComponent } from                                './app.component'                ;              
                import { AddInputComponent } from                                './add-input/add together-input.component'                ;              
                import { ShowApiComponent } from                                './bear witness-api/show-api.component'                ;              
                @NgModule({              
                                declarations: [              
                                AppComponent,              
                                ShowApiComponent              
                                ],              
                                imports: [              
                                BrowserModule,              
                                AppRoutingModule,              
                                HttpClientModule              
                                ],              
                                providers: [],              
                                bootstrap: [AppComponent]              
                })              
                consign class AppModule { }              

Step three: In Typescript file of component(Here bear witness-api.component.ts) import HttpClient. HttpClient helps to render and Fetch Data.The Employee Details API is used to go information. Nosotros go Response from API by passing API url in get() method and then subscribing to the url. The Response of the API is stored in a variable named li from which data assortment is further stored in an array named list here. The list assortment volition help us bear witness the data. A user defined function is chosen when response comes to hide the loader.
show-app.component.ts:-

javascript

                import { Component, OnInit } from                                '@angular/cadre'                ;              
                import {HttpClient} from                                '@athwart/common/http'                ;              
                @Component({              
                                selector:                                'app-evidence-api'                ,              
                                templateUrl:                                './show-api.component.html'                ,              
                                styleUrls: [                './evidence-api.component.css'                ]              
                })              
                consign class ShowApiComponent implements OnInit {              
                                li:any;              
                                lis=[];              
                                constructor(private http : HttpClient){              
                }              
                                ngOnInit(): void {              
                                .subscribe(Response => {              
                                if                (Response){              
                                hideloader();              
                                }              
                                console.log(Response)              
                                this                .li=Response;              
                                this                .lis=                this                .li.list;              
                                });              
                                function                hideloader(){              
                                document.getElementById(                'loading'                ).style.display =                                'none'                ;}              
                                }}              

Step iv: Now data array demand to exist shown using HTML. A Tabular array is used in which rows are added dynamically past the size of information array. For this, rows are created using *ngFor then data is showed from each row. In this file I had added a loader which loads till response comes.
prove-app.component.html:-

html

                <                h1                >Registered Employees</                h1                >              
                <                div                form                =                "d-flex justify-content-middle"                >              
                <                div                class                =                "spinner-border"                role                =                "status"                >              
                                <                bridge                class                =                "sr-only"                id                =                "loading"                >Loading...</                span                >              
                </                div                >              
                </                div                >              
                <                tabular array                class                =                "table"                id                =                'tab'                >              
                                <                thead                >              
                                <                tr                >              
                                <                th                telescopic                =                "col"                >Proper noun</                th                >              
                                <                th                scope                =                "col"                >Position</                th                >              
                                <                th                telescopic                =                "col"                >Office</                th                >              
                                <                th                scope                =                "col"                >Bacon</                th                >              
                                </                tr                >              
                                </                thead                >              
                                <                tbody                >              
                                <                tr                *                ngFor                =                "let e of lis;"                >              
                                <                td                >{{ e.name }}</                td                >              
                                <                td                >{{ e.position }}</                td                >              
                                <                td                >{{ eastward.office }}</                td                >              
                                <                td                >{{ e.salary }}</                td                >              
                                </                tr                >              
                                </                tbody                >              
                </                table                >              