How To Perform Get() Operation Using In-Memory Web API And Service In Angular

Angular In-Memory web API

Angular in-memory web API is a library that communicates angular HTTP and the angular HTTP client request. That means angular in-memory web API is a remote server that stores the value and redirects the data that you control into the frontend.

In-memory web API is used to test the Angular application's demos. Otherwise, you have to use the remote server to handle the applications.

To test our application we need a web service URL. Angular provides an in-memory web API that will provide a web service URL. We can configure URLs with dummy data using in-memory web API. Find the step angular in-memory web API.

To install Angular in-memory web API you have to follow a few steps.

Step 1

To create an in-memory web API you have to create an application and after creating it successfully you have to open the terminal.

Step 2

Now run the command for installing in-memory web API. “npm install in-memory web API -- save”. And after completing this process, you have to create a file like testdata.ts

Step 3

Now go to this file and import the in-memory web from the Angular library. Then you have to create a function with the name of “created”.

Step 4

Then get a variable with the name of book details that when typed is declared as an array.

Step 5

Add some details in the array and close this array.

Now you have to return this variable in the database body.

Now your API will be created and you will use this API in the service.

How to use in-memory web API in the Angular service

Step 1

Now you have to create a service using the command “ ng g service class name ”

Step 2

After creating this successfully you have to open the service.ts file.

Step 3

First you have to import observable and HTTP clients from the Angular library.

Httpclient import from the angular/common/HTTP library. And observable is an import from the rxjs-library.

Step 4

Now you have to declare a variable(type any or array[]).

Step 5

Now you have to create a URL of your API. And import this file path.

Step 6

Now you have to go to the constructor and create a private HTTP variable.

Step 7

Now create a function get-book (){} and then take an observable and then take the observable type and then you have to return this HTTP method and then get the URLs which we created in the service file.

Now you have to create a .ts file and then you have to go to the class and declare all variables which you have to take in the .api data.

Then you have to import this file into the service file and create an object in the service file.

Now your service is created successfully. Now you will use this service in your application.

Use this service in Angular applications

Step 1

Now you have to go to your .ts file and create import the wrapper class and create an object.

Step 2

Then you have to import this service.

Step 3

Then you have to go to the constructor section and let private HTTP for the service.

Step 4

Then you have to create a function for the query.

Step 5

Then you have to return this function.

Step 6

Create the query for showing the data.

Step 7

Now you have to open the show.html file. and create a list.

Step 8

Now you have to use the for loop in the list and define all values which value you are showing in the list item.

Step 9

Now you have to go to the module files and import all components, services, and all dependencies, and register all the requirements and then you have to run the applications. After running the application you have to see that all required details are shown in the browser.

Example of in-memory web API

First, run the command,

npm install in-memory web API -- save

This process will take few seconds to completely install.

Now write the code in the api.ts file.

api.ts

import{InMemoryDbService} from 'angular-in-memory-web-api'
export class TestData implements InMemoryDbService{
createDb(){
let BookDetails=[
{id:100, name:'chaman gautam', Author:'C#corner',category:'Software devcelopment'},
{id:101, name:'lucky gautam', Author:'Tpoint',category:'test'},
{id:102, name:'Lakshya gautam', Author:'Google',category:' devcelopment'},
{id:103, name:'ravi gautam', Author:'C#corner',category:'Software devcelopment'}
];
return {
books:BookDetails
};
}
}

service.ts

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import{Observable } from 'rxjs';
import { Book } from './book';
@Injectable({
providedIn: 'root'
})
export class BookService {
bookUrl="api/books"
constructor( private http:HttpClient) { }
createbook(book:Book):Observable<Book>{
let httpheaders=new HttpHeaders()
.set('Content-type','application/Json');
let options={
headers:httpheaders
};
return this.http.post<Book>(this.bookUrl,book,options);
}
getBooksFromStore():Observable<Book[]>{
return this.http.get<Book[]>(this.bookUrl);
}
}

rapper.ts

export interface Book{
id:number;
name:string;
Author:string;
catogery:string
}

showdata.ts

import { Component, OnInit } from '@angular/core';
import { BookService } from '../book.service';
import{ Book} from '../book'
@Component({
selector: 'app-showdata',
templateUrl: './showdata.component.html',
styleUrls: ['./showdata.component.css']
})
export class ShowdataComponent implements OnInit {
title='chaman gautam';
softBooks:Book[];
constructor(private bookservice:BookService) { }
ngOnInit(){
this.getsoftBooks();
}
getsoftBooks(){
this.bookservice.getBooksFromStore().subscribe(books => this.softBooks=books);
}
}

showdata.html

<h1><p>Show data using inmemory web api</p></h1>
<ul>
<li *ngFor="let bk of softBooks">
Id {{bk.id}}, Name: {{bk.name}}, Author {{bk.Author}}, Category: {{bk.category}}
</li>
</ul>

module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import {HttpClientModule } from '@angular/common/http'
import { AppComponent } from './app.component';
import { AddComponent } from './add/add.component';
import { RouterModule, Routes} from '@angular/router';
import{BookService } from './book.service';
import {InMemoryWebApiModule } from 'angular-in-memory-web-api';
import {TestData } from './testdata'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ShowdataComponent } from './showdata/showdata.component';
import { CommonModule } from '@angular/common';
const routes: Routes = [
{path:'', component:ShowdataComponent},
{ path:'add', component:AddComponent}
];
@NgModule({
declarations: [
AppComponent,
AddComponent,
ShowdataComponent
],
imports: [
BrowserModule,
AppRoutingModule,RouterModule.forRoot(routes),ReactiveFormsModule, FormsModule,
HttpClientModule, CommonModule,
InMemoryWebApiModule.forRoot(TestData)
],
providers: [BookService],
bootstrap: [ShowdataComponent]
})
export class AppModule { }

Now run this project using the command " ng serve ". and after compiling successfully you have to open the browser and hit " localhost:4200". after a few second your data will be shown like below.

OUTPUT

I hope you enjoyed this article. Follow Chaman Gautam to learn more about Angular, and follow C# Corner to to learn about more technology.