Simulate a Backend API with Angular In-Memory Web API
Imagine developing a new feature on the frontend of an application, but the HTTP endpoints aren’t ready for consumption from the backend development team. This is a common challenge when working with large teams of diverse developers. To overcome this obstacle, we can use a fake server to mimic all CRUD operations of an HTTP REST API while our data resides locally in our frontend application.
Get Started
Before we dive in, make sure you have the following:
- Node.js V10.x
- Prior working knowledge of Angular
- Prior working knowledge of TypeScript
Introducing Angular In-Memory Web API
The Angular In-Memory Web API is a library that intercepts Angular Http and HttpClient requests, redirecting them to an in-memory data store that you control in the frontend. With this library, you can seamlessly mimic delayed responses and perform tasks that would typically require a backend developer. However, it has limited capabilities and is not intended for production use.
Setting Up an Angular Project
We’ll use the Angular CLI tool to scaffold our project. First, check if you have the Angular CLI tool installed by running the following command in your terminal:
If you don’t have it installed, run the following command:
Now, create a new Angular project with the following command:
The Angular CLI will ask you for some details about the application you want to create. Answer “No” to the question about Angular routing, and accept the default choice (CSS) for the stylesheet format.
Setting Up Angular In-Memory Web API
Setting up Angular In-Memory Web API is easy and straightforward. First, install it as a dev dependency:
In the src/app directory, create a data.services.ts file and add the following code:
This code snippet creates an Angular service that implements the InMemoryDbService interface. The service then implements the createDb method, which creates an object in memory that represents our database.
Configuring the Backend API
Add the following to src/app/app.module.ts:
We import HttpClientInMemoryWebApiModule and call its forRoot method, passing the DataService as a parameter. This ensures we avoid creating multiple instances of DataService.
Introducing the Angular HTTP Client
The Angular HTTP client is a built-in HTTP client of the Angular framework. It’s available as an injectable class, with methods to perform HTTP requests. To use it, add the following to src/app/app.module.ts:
Building a CRUD Application
Building CRUD applications is an excellent way to learn new tools and concepts in software development. We’ll create a demo CRUD application that creates, updates, and deletes products.
Product Interface
Create a product.model.ts file in the products directory with the following code:
This defines a type interface for the structure of the product data we’ll be working with.
Communication with the API Backend
Create a product.service.ts file in the products directory and add the following code:
We import HttpClient from the Angular built-in HTTP package and inject it into the ProductService class. The getProducts method uses the HttpClient service to get the list of products from the database and returns an observable of them.
Subscribing to an Observable Stream
Update product-list.component.ts with the following code:
The getProducts method subscribes to the getProducts method of ProductService and sets the result to the products property of the component. Similarly, the addProduct, removeProduct, and updateProduct methods subscribe to the respective methods of ProductService.
Rendering the Component
Add the following to products/product-list/productlist.component.html:
The *ngFor directive is used to render a list of items based on a data source. In our case, we render product data for each of the product objects in our products array.
Final Touches
Update app.component.html as follows:
Also, update app.module.ts as follows:
Run the ng serve command again and open your browser on http://localhost:4200/. You should now see your CRUD application in action!
Debugging with LogRocket
Debugging Angular applications can be challenging, especially when users experience issues that are difficult to reproduce. With LogRocket, you can monitor and track Angular state and actions for all of your users in production. Try LogRocket today and start debugging like a pro!