Get Updated List using Angular Signal

Angular Signal is a new feature introduced in Angular 16 that provides a way to handle state management and reactive data flow within Angular applications. It offers a simpler and more efficient alternative to traditional state management solutions like RxJS Observables and NgRx.

Prerequisites

• Node >= 18.13.0
• Angular Cli v17

What are signals in angular?

Signals are wrappers around value, that notify all the consumers when the value gets updated. It can contain any value, from primitive to user-defined data structure. Its value is always read through a getter function, which helps angular to remember where it is being used.

What are writable signals?

The writable signals provide an API to update their value directly. When we update any value, it notifies all the consumers that a value has been changed.

Steps to Create Angular Application

Step 1: Create an angular application

We can make use of the angular cli to create a new application.

ng new writable-signals
cd writable-signals

This will create a new app in the directory writable-signals, we then use cd command to change active directory.

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Step 2: Create a signal array

We can create a simple array of random numbers wrapped with the signal wrapper and display it in the template. Its value can be read by calling it like a function.

<!-- app.component.html -->

<div class="container">
    @for (val of myArr(); track $index) {
    <span class="value">
        {{val}}
    </span>
    }
</div>
<button type="button" (click)="updateAr()">
    Update
</button>

/* app.component.scss */

.container {
    max-width: 850px;
    padding: 16px;
    margin: 32px auto;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;

}

button {
    display: block;
    margin: 0 auto;
}

// app.component.ts

import { Component, WritableSignal, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
})
export class AppComponent {
    myArr: WritableSignal<Array<number>>;

    constructor() {
        this.myArr = signal(this.getRandomArr());
    }

    getRandomArr() {
        return Array.from({ length: 10 },
             () => Math.round(Math.random() * 100));
    }

    updateAr() {
        this.myArr.update((oldValue) => {
            console.log('oldValue', oldValue);

            return this.getRandomArr();
        });
    }
}

Output