Post
Ask Question

HTTPClient Get In Angular 7

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 [email protected] --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
 
Next Recommended Reading Differences Between Angular 1.x & Angular v2