Consuming CRUD Operations with Angular 15

In this workshop, we will explore how to consume CRUD operations with Angular
15. This approach will enable you to create a dynamic application with
components tailored to each functionality. Follow these steps to successfully
integrate these features.

BackEnd part:

To better understand how to consume REST methods with Angular, we will set
up a small Spring Boot application that manages a simple entity called User.
We will start by implementing the UserRepository interface, followed by
creating the corresponding service, and finally implementing the web services
in the REST controller, as illustrated in the screenshots below.

Project Structure Entity + Enumeration

1
Workshop concluded by: Sirine NAIFAR
 Repository

Service

RestController

➔ Note: Don't forget to add the @CrossOrigin annotation. Adding @CrossOrigin

to a REST controller resolves security issues related to the Same Origin Policy
of browsers. This annotation allows HTTP requests from different domains,
which is often necessary when a frontend and backend application are
hosted on different domains. It facilitates communication between the
frontend and backend.

2
Workshop concluded by: Sirine NAIFAR
FrontEnd part:

Step 01: Create a model for the User entity.

Define a TypeScript class for the "User" entity in a file User.ts and another
TypeScript class for the "Gender" enumeration class in a file Gender.ts.

Step 02: Create a service to handle CRUD operations.

Create a UserService to handle CRUD operations on users. HttpClient should be
injected into this service to perform HTTP requests.

➔ Note: To be able to inject HttpClient into this service, you need to import the
"HttpClientModule" module in the "app.module.ts" file. HttpClientModule is a
module in Angular that provides the HttpClient service for making HTTP
requests to remote servers. It must be imported into the root module of the
application or into a specific module if you want to use it in a specific part
of the application. Once imported, it can be injected into services to
perform CRUD operations and other types of HTTP requests.

3
Workshop concluded by: Sirine NAIFAR
Step 03: Consume a web service

In this part, you will learn and understand how to consume a web service in an
Angular 15 application. Starting with the method to retrieve users.

1- Consume the web service in the "user.service.ts" class:

2- Declare a list of users in the "user.component.ts" class:

3- Inject the "user.service.ts" service into "app.component.ts" to be able to

retrieve the list of users :

4- Create the "loadUsers" method to load the list of users:

5- Implement the necessary structure in "user.component.html" to retrieve

and display the list of users:

4
Workshop concluded by: Sirine NAIFAR
 6- Call the "loadUsers" method in "ngOnInit()" to retrieve and display the list
of users when the "app.component.html" page is called

Step 04: Use Reactive Forms in components

I- Add a user :

1- Consume the web service in the "user.service.ts" class :

2- Import "ReactiveFormsModule" in the "imports" section of the

"app.module.ts" file to be able to use Reactive Forms :

3- Import "FormBuilder" into your component (For this workshop, we will use
the app component) to create reactive forms:

4- Create the form to add a user:

5- Create an instance to specify the gender of the user:

5
Workshop concluded by: Sirine NAIFAR
 6- In the component constructor, specify the composition of this form:
"firstName", "lastName", "birthDate", and "gender".

this.formBuilder.group({}) : This creates a control group for the reactive form.

formBuilder is injected into the component through dependency injection. This
allows you to create instances of FormGroup and other form controls.

All fields are declared as required using Validators.required.

Validators: Angular provides several other predefined validators that you can
use to validate the fields of your form. Here are some of the most commonly
used validators :

- Validators.required: Indicates that the field is required.

- Validators.minLength(minLength: number): Defines the minimum length
required for a string field.
- Validators.maxLength(maxLength: number): Defines the maximum
length allowed for a string field.
- Validators.pattern(pattern: string | RegExp): Validates the field's value
against a regular expression.
- Validators.email: Validates if the field's value is a valid email address.
- Validators.min(min: number): Validates if the field's value is greater than
or equal to a specified minimum value.
- Validators.max(max: number): Validates if the field's value is less than or
equal to a specified maximum value.

6
Workshop concluded by: Sirine NAIFAR
You can combine these validators to define more complex validation rules for
your form fields. For example, to define both a minimum and maximum length
for a string field, you can use:

➔ This indicates that the "name" field is required, must have a minimum
length of 3 characters, and a maximum length of 30 characters.
7- Create the form in "app.component.html"

Here is a detailed explanation of each part:

- formGroup="userForm": This binds the form to a form control group in the

corresponding component. This means that the controls of this form will
be defined in the component with a FormGroup.
- (ngSubmit)="addUser()": This is an event triggered when the form is
submitted. It calls the addUser() method in the component when the
form is submitted.
- formControlName="firstName": This binds this form input element to a
form control named firstName in the form control group.

7
Workshop concluded by: Sirine NAIFAR
 - (click)="cancelEdit()": This is a click event that calls the cancelEdit()
method in the component when the button is clicked. This cancels the
current edit.
8- Implement the "addUser()" and "cancelEdit()" methods in
"app.component.ts"

II- Edit a user:

For editing a user, simply modify the code as follows:

1- Declare a user in "app.component.ts":

2- Implement the "updateUser()" method to update a user's information:

8
Workshop concluded by: Sirine NAIFAR
3- Implement the "editUser()" method to prefill the form with the user's data
to be edited

4- Modify the code of the table to be able to select the user to be edited:

9
Workshop concluded by: Sirine NAIFAR
5- Modify the code of the form in the "app.component.html" file :

6- Modify the code of the "cancelEdit()" method and make it as follows:

III- Delete a user:

1- Consume the web service in the "user.service.ts" class:

2- Create the "deleteUser(id: number)" method in the "user.component.ts"

class to use the consumed web service:

10
Workshop concluded by: Sirine NAIFAR
 3- Modify the code of the "user.component.html" class by adding a button
in the table to delete a user:

Final result :

Figure 1: Final page

11
Workshop concluded by: Sirine NAIFAR
 Figure 2: Add user

Figure 3: Edit user

Figure 4: Delete user

12
Workshop concluded by: Sirine NAIFAR