TOPICS

Exercise 1: Clean Coding
Exercise 2: Work with models and Angular Pipes
Exercise 3: Form Control Validation
Exercise 4: the "Edit User" feature

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:

Add the creationDate property to the User type
Save the timestamp (Date.now()) into this new property when adding a new user
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.

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:

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.

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;
  }))