Angular 7 CRUD Example Tutorial

In this article, we will be building an Angular 7 CRUD Application step by step from scratch. We basically, developing Angular 7 CRUD Application using angular CLI and then modify it to have an Employee Management Project which performs CRUD operations such as create, read, update and delete employee with the sample Spring Boot REST API consumed using HttpClientModule. We will also be using RouterModule to have routing enabled. Angular is a platform and framework for building client applications in HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

In this Angular 7 web application, we will be consuming spring boot CRUD rest API exposed at Spring Boot 2 JPA MySQL CRUD Example article.You can download the source code of this tutorial from my GitHub repository at the end of this tutorial.Recommendation tutorials:

2. Create Angular 7 web application using Angular CLI

Let's use below command to generate an Angular 7 Client application. We name this project as "angular7-springboot-client".

ng new angular7-springboot-client

3. Identify Components, Services, and Modules

Let's list out what are components, service, and modules we are going to create in this application. We will use Angular CLI to generate components, services because Angular CLI follows best practices and saves much of time.

Components

create-employee

employee-list

employee-details

Services

employee.service.ts - Service for Http Client methods

Modules

FormsModule

HttpClientModule

AppRoutingModule.

Employee Class (Typescript class)

employee.ts: class Employee (id, firstName, lastName, emailId)

In this next step, we will generate these components, classes, and services using Angular CLI.

4. Create Service & Components

Let's auto-generate service and components using Angular CLI. Change your project directory to angular7-springboot-client\src\app and run the following commands:

18. App Module -> app/app.module.ts

Defines the root module, named AppModule, that tells Angular how to assemble the application. Initially declares only the AppComponent. As you add more components to the app, they must be declared here.

19. Configure a proxy for your API calls with Angular CLI

Here I will show you how to set up your Angular development server and how to configure it to properly communicate with your backend (REST) API.

In a real-world setup where you have your Angular CLI development server running on http://localhost:4200 and your backend API (in whichever technology you like) running on some other port or even host, let’s say http://localhost:8080 (this could also be http://dev-123.mycompany.com or something else ofc).

When you then want to execute an HTTP call within the app, you’d have to write something like this, indicating the full path of your backend API.

Obviously, the base URL (i.e. the host) can be configured in a central place somewhere, such as via the environment.ts file (that gets generated by the Angular CLI). But there’s another issue as well. Unless you’re creating some publicly consumable API and you inject the required CORS headers, you’ll most probably get some CORS exceptions.

What is the solution? Here is a solution with different options.

Configuring your Angular CLI dev-server proxy

There are different options:

add the proper CORS headers - This is definitely a must in a case when you design a generic API where you don’t even know the consumer.

use a proxy - A proxy is a piece of software which is in between your JavaScript/Angular app doing the Ajax request and your backend API. This is the choice to go in a classic app.

In this example, I have used proxy to configure our Angular CLI dev-server proxy.

To set it up, we need to create a file proxy.conf.json at the root of our Angular CLI project. The content should look as follows:

21. Demo

Employee List Page

Add Employee Page

Delete Employee

Note that update employee functionality is not implemented so you can take as exercise and try to implement yourself (Tip: Add an update button to the employee list page and based on employee id you can implement update functionality. Note that Rest API is already created for update employee functionality).