HTTPClient Get In Angular 7

In this blog, you will learn how to get the data from API in angular with the help of httpget.

I'm going to explain the way to get data from API and display in UI. Here I'm using angular-in-memory-web-api. You can take the data from API as well.
 
Step 1
 
To test our application we need web service Url. Angular provides Angular in-Memory web Api to test our application. Firstly install Angular in-Memoy web Api
 
npm i angular-in-memory-web-api@0.5.3 --save 
 
I have implemented inmemoydbservice
 
testdata.ts 
  1. import {InMemoryDbService} from 'angular-in-memory-web-api';  
  2.   
  3. export class TestData implements InMemoryDbService{  
  4. createDb(){  
  5.    let bookdetails =[  
  6.    {id:100, name:'Abhishek', place:'Bangalore'},  
  7.    {id:101, name:'John', place:'Delhi'},  
  8.    {id:102, name:'jiva', place:'Kolkata'},  
  9.    {id:103, name:'jivan', place:'Kota'},  
  10.    {id:104, name:'santan', place:'Durgapur'},  
  11.    ];  
  12.    return {books :bookdetails}  
  13.   }  
  14. }  
Step 2
 
Create a service under src : ng g service book
 
book.service.ts 
  1. import { Injectable } from '@angular/core';  
  2. import {HttpClient} from '@angular/common/http';  
  3. import { Observable } from 'rxjs';  
  4. import {Book} from './book'  
  5.   
  6. @Injectable({  
  7.    providedIn: 'root'  
  8. })  
  9. export class BookService {  
  10.    bookurl='/api/books';  
  11.   
  12.    constructor(private http:HttpClient) { }  
  13.    getBookFromStore():Observable<Book[]>  
  14.    {  
  15.       return this.http.get<Book[]>(this.bookurl);  
  16.    }  
  17. }  
Step 3
 
Create a ts file to store Book properties
 
book.ts 
  1. export interface Book{  
  2.    id:number;  
  3.    name:string;  
  4.    place:string;  
  5. }  
Step 4 - app.module.ts
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import {HttpClientModule} from '@angular/common/http'  
  4. import { RouterModule,Routes } from '@angular/router';  
  5. import { FormsModule } from '@angular/forms';  
  6.   
  7. import { AppComponent } from './app.component';  
  8.   
  9. import { BookService } from 'src/book.service';  
  10. import {InMemoryWebApiModule} from 'angular-in-memory-web-api'  
  11. import {TestData} from 'src/testdata'  
  12. @NgModule({  
  13.    declarations: [  
  14.    AppComponent  
  15. ],  
  16. imports: [  
  17.    BrowserModule,  
  18.    HttpClientModule,  
  19.    InMemoryWebApiModule.forRoot(TestData)  
  20.    ],  
  21.    providers: [BookService],  
  22.    bootstrap: [AppComponent]  
  23. })  
  24. export class AppModule { }  
Step 5 - app.component.ts
  1. import { Component } from '@angular/core';  
  2. import { BookService } from 'src/book.service';  
  3. import { TestData } from 'src/testdata';  
  4. import { Book } from 'src/book';  
  5. @Component({  
  6.    selector: 'app-root',  
  7.    templateUrl: './app.component.html'  
  8. })  
  9. export class AppComponent {  
  10.    title = 'httpclient get in Angular 7';  
  11.    softbook :Book[];  
  12.    constructor(private bookservice:BookService){  
  13.   
  14. }  
  15. ngOnInit(){  
  16.    this.getsoftBook();  
  17. }  
  18. getsoftBook(){  
  19.    this.bookservice.getBookFromStore().subscribe(books=>this.softbook=books);  
  20.    }  
  21. }  
Step 6 - app.component.html
  1. <style>  
  2. table, th, td {  
  3.    border: 1px solid black;  
  4.    border-collapse: collapse;  
  5. }  
  6. th, td {  
  7.    padding: 5px;  
  8. }  
  9. th {  
  10.    text-align: left;  
  11. }  
  12. </style>  
  13. <body>  
  14.     <h1 style="color:red;">welcome to {{title}}</h1>  
  15.     <div class="container">  
  16.         <table>  
  17.             <thead>  
  18.                 <tr>  
  19.                     <th>Id</th>  
  20.                     <th>Name</th>  
  21.                     <th>Place</th>  
  22.                 </tr>  
  23.             </thead>  
  24.             <tbody *ngFor="let bk of softbook">  
  25.                 <tr>  
  26.                     <td>{{bk.id}}</td>  
  27.                     <td>{{bk.name}}</td>  
  28.                     <td>{{bk.place}}</td>  
  29.                 </tr>  
  30.             </tbody>  
  31.         </table>  
  32.     </div>  
  33. </body>  
Output