Angular – How to Build A CRUD Application

Right from its launch, Angular JS has ruled the world of open-source application development. As a highly advanced feature-rich and client-side framework, Angular is adopted and used widely by web development firms and individual developers all over the world. Angular web development is a very in demand venture these days.

Building a CRUD App with Angular

When it comes to building a Crud app with Angular, there are essentials that an Angular web developer practices. The first thing to do is to deal with a mountain of data. This data then that lives on the server is dealt with using HTTP operations. In a real app, the data is stored on the server and received via the API.

Nevertheless, for the purposes of testing, rather than use a real server, a fake back-end server could actually be used. There are several ways of using a fake back-end server, such as the following:

Utilize Angular in-memory-web-api

The best out of all for CRUD operations for the purposes of development and testing is use the in-memory-web-api of the framework. This could simulate a server and return mock data with HTTP requests.

This is not a part of Angular Core but provided as a server in the documentation of the framework. This would send HTTP requests to a local in-memory data store in the place of a remote server, making a task considerably easier to do.

To begin, the first thing to do is to install the angular-in-memory-web api with this: npm install angular-in-memory-web-api-save-dev

For the purposes of development, the save dev flag is utilized to save dependency. When finished, dependencies could be seen inside the package.json file. With the dependency saved in the app, you could proceed to use the angular-in-memory-web-api to do CRUD operations within the app.

Within the in-memory-web-api, the data is set up already and ready to acquire from the fake server as well as ready to do operations with CRUD. To get data from anywhere, the best resort would be the Services.

- Advertisement -

The next step is to make a service that gets data from the API. Proceed to provide that data to work around. What is created is the DataService and within this is accessing data via a remote API with the help of:

Apiurl = ‘api/users’;

Next is to inject the HttpClient service. Before doing that however, there are some vital files to be imported, including.

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

What sets the variable to do http operations is the 14 code line. Finally, you want to read data received via this remote call and all ready to do CRUD operations.

To read data from the API, http.get() should be used within the service created. Data could be read with Observables that are returned from the UserData array created.

- Advertisement -

For reading data from the catchError as well as the observable method, tap and pipe operators should be used. Also, it’s used to handle the error if ever it will happen during an HTTP request. To call getUsers() method, proceed to subscribe to the returned observable within the Component, which would read data from the API, displaying it on the template as

Read data using the angular-in-memory-web-api

With all the CRUD operations, data reading from the server is the simplest and easiest. Additionally, a user must be fetched with a particular ID to update or to delete a particular use. In the same way, to build a new user as the data, details are required, saving them as some initialized User array.

Get User

In order to perform this, see how to get 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 component.ts, call the getUser method that you have just built within the service. Create input box on template, requesting user to input the ID that they would want to get details with.

Make Data

Doing HTTP POST operation, as well as passing data that has to be inserted on a database is a must for creating API data. For that, consider a method addUser().

Call the addUser() on the component method and subscribe to the observable returned. Create a form on a template that could be used by a user for inputting new data details that provide results.

Update Data

Similarly, take user ID that he or she wants to update for updating the data and updating the age of the particular user; data.service.ts

It’s important to note that each time you want to do an update on the operation, you should use the http.put() on the component.ts.

Data deletion

For deleting of data or recording from a database, use http.delete() and proceed to subscribe to the observable returned in the component through creating a deleteUser() method. Subscribe to the observable on the component with: deleteUser

Author Bio

Rooney Reeves is working as a Business Development Executive at – eTatvaSoft, an Angular Development Company. Know More about the upcoming Angular Development related News. She always accepts challenges and puts some effort into it. She loves to write and spread her knowledge through writing. Follow her on Twitter.

Angular – How to Build A CRUD Application