Building A CRUD Application With Angular

In almost any application that we work with, the first important thing is to deal with the data, loads and loads of data. And this 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 the data.

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

Read about this here.

• GitHub Repo

The different ways to use 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

The best out of all to perform CRUD operations for development and testing purposes is to use Angular In-memory Web API. Using this, we can actually simulate a server and return mock data with the HTTP requests.

 

Angular In-memory Web API

 This 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 now send the HTTP requests to the local in-memory data store in place of the remote server and make our task a lot easier.

The main purpose of this blog post is to put light on using Angular In-memory Web API to produce a working CRUD application with Angular. By the end of this article, you should be able to create, read, update, and delete the data.

To start, the very first task is to install the Angular In-memory Web API using the command mentioned below.

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

The save dev flag is used here to save this dependency that we will use for the development purpose.

Once done, you’ll be able to see it in the dependencies inside your package.json file.

 

Now that we have this dependency saved in our application, we can go forward with using the Angular In-memory Web API for performing CRUD operations inside our application.

Faking a back-end server in Angular

 

In this blog post, we can see how to work with data without using a real server. This means without having to use a…medium.com

I assume you have created your in-memory data store by now with the help of Angular In-memory Web API and your progress till here looks like the following.

user-data.ts
user-data.service.ts


app.module.ts

By now, our data is set up in the In-memory Web API and we are ready to obtain the data from the fake server and perform CRUD operations with that.

Now, to get the data from anywhere, what is the best resort? Services!

So, now, we go on to create a service which will obtain data from the API and provide us that data to work around with that.

What exactly are we doing here?

We have created this service DataService. Inside this, we are accessing the data through the remote API with the help of this line 12 in the above code i.e.

apiurl = ‘api/users’;

Next step is to inject the service HttpClient but before we do that, some important files need to be imported.

import {HttpClient, HttpHeaders} from ‘@angular/common/http’;
import {Observable, throwError} from ‘rxjs’;
import { tap, catchError } from ‘rxjs/operators’;

The code in line 14 is setting the variable perfop to perform HTTP operations. Now finally, we want to read the data which we receive through this remote call.

And we are all set to perform the CRUD operations now.

READ DATA

To read the data from the API, we need to use http.get() method inside the service that we created. We will read the data with the help of Observables returned from the created UserData array.

Here, we are using pipe and tap operators to read the data from the observable and catchError method to handle the error if it occurs during the HTTP request. To call the getUsers() method, we will now subscribe to the returned observable inside the Component.

This reads the data from the API, and displays it on the template and gives the results as below.

 
Reading Data with Angular In-memory Web API

Reading the data from the server is the easiest of all CRUD operations and performing the read of data is not entirely different from how the functionality for creating, updating and deleting the data would work. We need to fetch the user with a particular id to update or delete that particular user. Similarly, to create a new user as the data, we would need the details to be input and then save them as some initialized the User array.

Fetch User

To perform this, let us first see how to get a user with a particular id.

getUser(id: number): Observable < User > {
    const url = `${this.apiurl}/${id}`;
    return this.http.get < User > (url).pipe(catchError(this.handleError));
}

On the component.ts, call the method getUser that you just created inside the service.

Create an input box on the template asking the user to input the id of users they want to fetch the details of.

 

CREATE DATA

To create the data in the API, we need to perform HTTP POST operation and pass the data that needs to be inserted in the database.

We will take a method addUser() for that.

On the component, call the addUser() method and subscribe to the returned observable.

On the template create a form for the user to input the details of the new data and this gives the results as,

 

Update Data

Similarly, now to update the data, we’ll take an id of the user we want to update and update the age of that particular user.

data.service.ts

An important thing to notice here is that, whenever we want to perform the update operation, we use http.put() method.

On the component.ts,

 

We have seen how to update the data by taking input from the user as to which user to update with the new age.

Next, we will see how to delete the data from the list of Users created in the database.

DELETE DATA

To delete a record from the database, we use http.delete() method and subscribe to the returned observable in the component by creating a method deleteUser().

On the component, we subscribe to the observable using,

deleteUser

SUMMARY

Coming to the end of this post, let us have a quick recap of what we did.

• Created an in-memory data store to mock a call to the API.
• Generated a service to get the data from the API
• Performed http.get() method to read data, http.post() method to create data, http.put() method to update data, http.delete() method to delete data.
• Subscribed to the returned observable in the respective methods in the component.ts file.