Angular In-memory-web-api

The most important thing about working with any application, is dealing with data, lots of it. Data that resides on the server is dealt with by the use of HTTP operations. We perform HTTP, GET, and POST operations to work with that data.

Now, in a real application, this data is stored on the server and received through an API. However, for testing purposes, instead of using a real server, we can fake the back-end server.

The different ways of using a fake back-end server are:

• Create a file, hard-code the data, and return this data.
• Create a local JSON file and use it
• Use Angular in-memory-web-api

In this lesson, we will look at Angular’s way of creating an in-memory data store that basically mocks an API call until we have a real API to fetch the data from ready.

in-memory-web-api

The angular-in-memory-web-api is not a part of Angular Core but it is provided as a service in the Angular documentation. This will send the HTTP requests to the local in-memory data store in place of the remote server and make our task a lot easier.

To get started, we need to first install this as a dev dependency as it is not part of the Angular Core package.

npm install angular-in-memory-web-api --save-dev

The save-dev flag is used here to save this dependency since we will use it for development purposes. Once completed, you can see it in the dependencies inside your package.json file.

Now, step one is to create an entity class where we mention the class name and its properties.

This entity class, called User, can be defined as:

export class User {
   constructor(public id=0, public name='', 
    public email='', public contact='') {}
}

After our entity class is ready, we will implement InMemoryDbService inside a new class as a service. See the next code for this.

import {InMemoryDbService} from 'angular-in-memory-web-api';
import {User} from './user-data';


export class UserData implements InMemoryDbService {
  createDb(){
    const users: User[]=[
      { id: 1, name: 'Joe', email: 'joe@gmail.com', contact: '0000000000'  },
      { id: 2, name: 'James', email: 'james@gmail.com', contact: '1111111111'  },
      { id: 3, name: 'Harry', email: 'harry@live.in', contact: '2222222222'  },
      { id: 4, name: 'Jack', email: 'jack@gmail.com', contact: '6666666666' },
      { id: 5, name: 'Lara', email: 'lara@live.in', contact: '9909999999'  }

    ];
    return {users};
  }
}

In this example, we are overriding the createDb() method and creating a collection of the entity Users, which returns its collection in the end.

Another thing that we’re doing here is importing the InMemoryDbService. To use all these, we need to register these inside the module as follows:

InMemoryWebApiModule.forRoot(userData);

Import the InMemoryWebApiModule by:

import {InMemoryWebApiModule} from 'angular-in-memory-web-api'

Once you are ready with this data that you are returning your service in the name users, you can go ahead, create a service to deal with HttpClient that we talked about earlier, and perform your crud operations.