Introduction to Signals

Chapter Objective

Learn how to use Signals to make your application reactive.

Signals

Angular now use a new reactive API called Signals. It helps updating your application whenever a change occurs.

To make a property reactive with Signals, use the signal function and pass it the task list as a parameter. Its type change too: as we want to be able to update the task list, we need to use the WritableSignal type.

tasks: WritableSignal<Task[]> = signal([
  {
    title: "Task 1",
    description: "Description of task 1",
    createdAt: new Date(),
  },
  {
    title: "Task 2",
    description: "Description of task 2",
    createdAt: new Date(),
  },
]);

Instructions

1. Update the src/app/task-list.ts file:

   task-list.ts

   // Import the signal API
   import { Component, signal, WritableSignal } from "@angular/core";
   
   import { Task } from "../models/task.model";
   
   import { v4 as uuid } from "uuid";
   
   @Component({
     selector: "app-task-list",
     imports: [],
     templateUrl: "./task-list.html",
     styleUrls: ["./task-list.css"],
   })
   export class TaskList {
     tasks: WritableSignal<Task[]> = signal([
       {
         id: uuid(),
         title: "Task 1",
         description: "Description of task 1",
         createdAt: new Date(),
       },
       {
         id: uuid(),
         title: "Task 2",
         description: "Description of task 2",
         createdAt: new Date(),
       },
     ]);
   }

Why use Signals?

Signals are meant to be used for reactivity purposes. If this variable will be static for the first part of the tutorial, it’ll accept changes later on and we already want it to be reactive.

Except if you use some old project, your application should use Angular 21 or higher. This version introduces what we call zoneless change detection. The change detection is the solution to detect changes in your application to update your templates accordingly. With zoneless change detection, the change detection is triggered automatically when a signal is updated, while it’s not for other variables.

What you've learned

You have learned how to declare your first signal variable in Angular using the Signals API. This approach makes your variables reactive, allowing automatic updates in the UI when their content changes. You’ll use signals throughout the tutorial to manage and update your task list dynamically.