Create a simple CRUD app

Angular 15

Tutorial Challenges

This page does not contain technical information but you can find several micro challenges that you can complete independently to test yourself.

The goal is verify that you have understood what you have achieved in the previous steps, study other concepts independently and try to integrate them into the project you have created so far.

So, you won't find the solutions here. Try to solve them yourself!

2022-12-28
5 min read
Difficulty
angular
typescript

TOPICS

Exercise 1: Clean Coding

Difficulty:

Currently the users.service.ts methods names are deleteHandler and saveHandler.

Rename them in deleteUser and saveUser since they are more expressive.

Exercise 2: Work with models and Angular Pipes

Difficulty:

  1. Add the creationDate property to the User type
  2. Save the timestamp (Date.now()) into this new property when adding a new user
  3. Display and format the date in every list item close to the label: you can use the built-in date pipe

TIP: how to use 'date' pipe

{{user.creationDate | date: 'dd MM yyyy'}}

Read DatePipe Doc

Exercise 3: Form Control Validation

Difficulty:

The user name (label property) is a required field when adding a new user but now you should also check if it contains min 3 chars. Your goal is display a different message for each type of error :

  • if input field is empty (required error): "User name is required"
  • if input field contains < 3 chars (minlength error): "User name must contains at least 3 chars"

Read the official Form Validation documentation for more info

TIP 1: use attribute form validators to se the minimum length

<input
  [ngModel] 
  required 
  minlength="3"
  #labelInput="ngModel"
>

TIP 2: use following syntax to display error

<div *ngIf="labelInput.errors?.['required']">...</div>
<div *ngIf="labelInput.errors?.['minlength']">...</div>

Exercise 4: the "Edit User" feature

Difficulty:

This is the most complex challenge: you have to give the possibility to select and highlight any user of the list, populate the form and edit them.

This is the final result you should achieve:

TIP 1

Add a new selectedUser property in your service. You don't need to initialize it.

AngularTypeScript
services/users.service.ts
export class UsersService {
  selectedUser: User | null = null;
  //...~

TIP 2

You must add the click listener to each item of the list in the HTML template and invoke a new method of the service (i.e. setSelectedUser).

So, assign user to selectedUser property of the service:

AngularTypeScript
services/users.service.ts
setSelectedUser(user: User) {
  this.selectedUser = user;
}

TIP 3

You can use ngModel directive to bind (synchronize) an input with a property.

The input value will be updated each time selectedUsers changes.

AngularTypeScript
app.component.ts
<input 
  [ngModel]="usersService.selectedUser?.label"
/>

Safe Operator `?`

Use the safe operator "?" (aka known in JS as Optional Chain Operator) in order to avoid compiler errors when selectedUser is empty

TIP 4

The same form is now used to add and edit users. You should then invoke a new save method after submitting it and use the selectedUser property to know if you are adding or editing an user in your saveHandler service method:

  • if selectedUser is empty: it means you're adding a new user
  • if selectedUser has some values: it means you're editing an exhisting user

  saveHandler(user: User) {
    if (this.selectedUser) {
      return this.editUser(user);
    } else {
      return this.addUser(user)
    }
  }

To add a new user you can just use the POST method:

this.http.post<User>(`${this.URL}/users/`, user)

While to edit an exhisting user you should use PATCH:

 this.http.patch<User>(`${this.URL}/users/${this.selectedUser?.id}`, user)
 // ...
  this.users = this.users.map((u => {
    return u.id === this.selectedUser?.id ? newUser : u;
  }))

TIP 5

You should also highlight the current active user:

FINAL RESULT

WHAT'S NEXT

ADS: MY LATEST VIDEO COURSE <br />(italian only)ADS: MY LATEST VIDEO COURSE <br />(italian only)
ADS: MY LATEST VIDEO COURSE
(italian only)

Keep updated about latest content
videos, articles, tips and news