Controlling the state of a frontend application is one of the biggest challenges for a developer, as by nature, the interface is dynamic and needs to react to various user actions. Angular, with its stacks included philosophy, already had tools suitable for this task, and we studied in Chapters 5, Angular Services and the Singleton Pattern, and Chapter 9, Exploring Reactivity with RxJS, how to use these tools. However, despite being effective, the Angular community and team recognize that they are a bit complex for new developers and for simple cases of reactivity in frontend projects. To fill this gap, the Angular team introduced, from version 17 onward, a new element to the framework, called Signals.
According to the Angular documentation, a signal is a wrapper around a value that notifies consumers when that value changes. An analogy that you can associate with a signal is a cell in a spreadsheet. It can contain a value and we can create formulas in other cells that use its value to create other values.
Before refactoring our application, let’s illustrate this with a simpler example:
let a = signal<number>(2);
let b = signal<number>(3);
let sum = computed(() => a() + b());
console.log(sum());
To create a signal, we use the signal function, where we define what type of value it will store and declare an initial value for it. A signal can be writable or read-only; in this case, the variables a and b are writable. The variable c is also a signal but of a specific type, called computed. The computed type is, in our analogy of a spreadsheet, a cell that contains a formula where you can read the values of other cells to determine its value. Finally, we are reading the value of the signal by simply calling it as a function. The result of this code snippet is the value 5.
We will now change the example:
let a = signal<number>(2);
let b = signal<number>(3);
let sum = computed(() => a() + b());
console.log(sum());
a.set(9);
console.log(sum());
In this change, we are updating the value of signal a using the set method. When reading the sum signal, we can notice that the value was updated to 12. Notice that the calculation reacts in real time just like it would in a spreadsheet..
Another way to update the value of a writable signal is by using the update method:
let a = signal<number>(2);
let b = signal<number>(3);
let sum = computed(() => a() + b());
console.log(sum());
a.set(9);
console.log(sum());
b.update((oldValue) => oldValue * 2);
console.log(sum());
The update method allows you to update the signal based on the last value contained there.
Despite being simple, signal allows many possibilities as it can contain any type of value, from primitive ones such as numeric, string, and Boolean to complex objects.
We will refactor our project to use signals, starting with the LoadService service:
export class LoadService {
isLoading = signal<Boolean>(false);
showLoader() {
this.isLoading.set(true);
}
hideLoader() {
this.isLoading.set(false);
}
}
Here, we are exchanging the isLoading attribute for the isLoading signal, simplifying the service. We will change the AppComponent component template as follows:
@if (loadService.isLoading()) {
<app-loading-overlay />
}
<router-outlet></router-outlet>
To read the contents of the signal, we call it as if it were a function. Normally, it is not a good practice to call a function in a template, due to unnecessary processing. However, the signal was created and optimized to be read in the template, so in this case, there is no problem.
The next task will be to refactor the list of journal entries so that we no longer manage the list but leave everything to the ExerciseSetsService service. We’ll start by changing the ExerciseSetsService service as follows:
export class ExerciseSetsService {
exerciseList = signal<ExerciseSetList>([] as ExerciseSetList);
getInitialList() {
const headers = new HttpHeaders().set(‘X-TELEMETRY’, ‘true’);
this.httpClient
.get<ExerciseSetListAPI>(this.url, { headers })
.pipe(map((api) => api?.items))
.subscribe((list) => this.exerciseList.set(list));
}
deleteItem(id: string) {
this.httpClient.delete<boolean>(`${this.url}/${id}`).subscribe(() => {
this.exerciseList.update((list) =>
list.filter((exerciseSet) => exerciseSet.id !== id)
);
});
}
}
No Responses