Introduzione ai signals in Angular

Angular 17, tra le varie cose, ha introdotto i signals.

Con i signals adesso Angular è in grado di capire quale parte della pagina aggiornare, in quanto è in grado di ricevere la notifica nel caso del cambiamento del valore.

Nell'articolo introduttivo che vediamo oggi, in verità, possiamo ottenere la stessa cosa anche senza.

Solo che col il metodo "standard" non c'è una notifica (interna) del cambiamento, e questo può essere utile in molti casi.

Comunque ecco il codice del componente:

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

@Component({
  selector: 'app-root',
  imports: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {

  counter = signal(0);

  constructor() {
    console.log(`Valore counter: ${this.counter()}`)
  }

  increment() {
    console.log('Aggiornamento counter...');
    this.counter.set(this.counter() + 1);
  }

}

Molto easy; l'HTML:

<h1>Valore corrente: {{counter()}}</h1>
<button (click)="increment()">Incrementa</button>

Enjoy!