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';
  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'
  6. @Injectable({
  7. providedIn: 'root'
  8. })
  9. export class BookService {
  10. bookurl='/api/books';
  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';
  7. import { AppComponent } from './app.component';
  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){
  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