How To Use Angular In-Memory Web API

Angular In-Memory Web API facilitates the developer by providing the fake endpoint  for faster and independent development.

When a developer thinks about Web API, he generally expects the data as a response object. While working on the team, front-end developer (angular developer in this case) depends on the back end developer for populating the client application with data.

In the normal case, if back-end development slows down, it affects the front-end development too. Angular In-Memory web API works as the fake data provider for the client application in the absence of real API.

This article will demonstrate the use of Angular In-Memory web API with the help of a simple application.

We will create a data listing angular CLI project where Angular In-Memory web API acts as the data provider for our application.

Create angular CLI project:

ng new InMemoryWebApi-Angular

Install angular in-memory web API:

npm install angular-in-memory-web-api

Now I will create a service named “FakeEndpointService” which is the fake data provider as its name is enough to understand.

Create a service:

ng g s service/fake-endpoint

This command will create our service inside the service folder. Now open the file fake-endpoint.service.ts and replace its content with the following code.

Here we implement the InMemoryDbService which will provide the property CreateDb where we describe the fake data. Now open the app.module.ts file and set up the required imports for running our application.

Here I have imported FakeEndpointService and mentioned it inside the Imports section with HttpClientInMemoryWebApiModule.

For using FakeEndpointService with HttpClientInMemoryWebApiModule, it must implement InMemoryDbService which we have already done in the previous step.

This part (HttpClientInMemoryWebApiModule.forRoot(FakeEndpointService)) acts as the real hero role for intercepting all our HTTP calls and returning the fake data. You can remove this part of code when you want to call your real web API later.

FormModule is useful as we have to use “*ngFor” directive in out template for looping out data collection.

HttpClientModule is useful as we have to make HTTP call to our In-Memory web API.

Now open the app.component.ts file and replace your code with following.

Here everything seems like an angular application is consuming the web API which exists somewhere. There is no difference in HTPP call regardless of using the fake API.

If you analyze the API URL (api/friendsList), the “friendsList” is the name of an object that I have returned from createDb() function in FakeEndpointService.

Warning: the second part of the URL (i.e friendsList) is the case sensitive. Try to replace it with all small letters, you will be in trouble.

Now open the app.component.html file and replace it with the following code.

Nothing fancy here, I have created the HTML table and applied the loop on HTML row through friendsList object exported from app.component.ts.

Super cool !!!

You can find this project on GitHub and apply your modification. Please let me know in the comment section below if you have done something new with Angular In-memory web API.

Have a great day.

About dipneupane

Dip is a passionate Software Developer based in Kathmandu, Nepal. He chew code and smash keyboard for living. Apart from that, he writes about almost everything on buzzedcode.com.

View all posts by dipneupane →

One Comment on “How To Use Angular In-Memory Web API”

Leave a Reply

Your email address will not be published. Required fields are marked *