{"id":33794,"date":"2025-08-19T13:05:05","date_gmt":"2025-08-19T11:05:05","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=33794"},"modified":"2025-08-19T13:05:07","modified_gmt":"2025-08-19T11:05:07","slug":"angular-deep-signal-modellare-lo-stato-in-profondita","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/angular-deep-signal-modellare-lo-stato-in-profondita\/","title":{"rendered":"Angular Deep Signal: Modellare lo Stato in Profondit\u00e0"},"content":{"rendered":"\n

Con l\u2019introduzione dei Signals<\/strong> in Angular, la gestione dello stato \u00e8 diventata molto pi\u00f9 chiara, manutenibile e prevedibile.<\/p>\n\n\n\n

Grazie alle primitive come signal()<\/strong><\/code>, computed()<\/strong><\/code> ed effect()<\/strong><\/code>, possiamo modellare e derivare i dati in modo efficace, mantenendo sotto controllo le dipendenze tra i vari pezzi di stato.<\/p>\n\n\n\n

Tuttavia, aggiornare i valori derivati non \u00e8 altrettanto immediato<\/strong> e richiede spesso interventi manuali sullo stato principale.<\/p>\n\n\n\n

Per rispondere a questa esigenza il team di Angular sta lavorando ad una nuova primitiva: Deep Signal<\/strong>.
Si tratta di una soluzione robusta per accedere e modificare direttamente, in modo reattivo, le propriet\u00e0 annidate<\/strong> all\u2019interno di un altro Signal.<\/p>\n\n\n\n

In questo articolo vedremo cosa sono i Deep Signal<\/strong>, come funzionano e perch\u00e9 possono semplificare il codice delle nostre applicazioni Angular.<\/p>\n\n\n\n

\n\n\n\n

\ud83c\udfaf Accedere e aggiornare lo stato annidato<\/h2>\n\n\n\n

Consideriamo il caso di un\u2019applicazione che gestisce i dati anagrafici di un utente. Uno scenario molto comune, in cui lo stato applicativo racchiude informazioni come nome<\/strong>, cognome<\/strong> e citt\u00e0<\/strong> di residenza:<\/p>\n\n\n

const<\/span> userModel = signal({\n<\/span><\/span>  name: 'Davide'<\/span>,\n<\/span><\/span>  lastname: 'Passafaro'<\/span>,\n<\/span><\/span>  city: 'Rome'<\/span>\n<\/span><\/span>  }\n<\/span><\/span>});\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Grazie ai computed()<\/strong><\/code> Signal, possiamo facilmente derivare valori da questo stato, ad esempio per ottenere il nome<\/strong> e la citt\u00e0<\/strong> dell\u2019utente:<\/p>\n\n\n
const<\/span> userName = computed(()<\/span> =><\/span> userModel().name);\n<\/span><\/span>\n<\/span><\/span>const<\/span> userCity = computed(()<\/span> =><\/span> userModel().city);\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Supponiamo ora di voler consentire all\u2019utente di aggiornare le proprie informazioni tramite un form. Grazie ad ngModel<\/strong><\/code>, possiamo collegare direttamente gli input del form ai valori dei nostri Signals:<\/p>\n\n\n
<p<\/span>><\/span>Nome: <input<\/span> type<\/span>=\"text\"<\/span> [(ngModel<\/span>)]=\"userName()\"<\/span>><\/span><\/p<\/span>><\/span>\n<\/span><\/span>\n<\/span><\/span><p<\/span>><\/span>Citt\u00e0: <input<\/span> type<\/span>=\"text\"<\/span> [(ngModel<\/span>)]=\"userCity()\"<\/span>><\/span><\/p<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Tuttavia, qui sorge un problema: i valori derivati da computed()<\/strong><\/code> sono solamente in lettura<\/strong> e quindi non possono essere aggiornati direttamente.<\/p>\n\n\n\n
La direttiva ngModel<\/strong><\/code>, invece, si aspetta di poter sia leggere che scrivere sul modello associato.<\/p>\n\n\n\n
Linked Signal: un workaround, non proprio una soluzione<\/h3>\n\n\n\n
Per aggiornare una propriet\u00e0 annidata, siamo costretti a intervenire manualmente sullo stato padre, creando una funzione dedicata.<\/p>\n\n\n\n
Nel nostro esempio, possiamo definire una funzione updateCity<\/strong><\/code> come questa:<\/p>\n\n\n
function<\/span> updateCity<\/span>(newCity: string<\/span><\/span>) <\/span>{\n<\/span><\/span>  userModel.update(user<\/span> =><\/span> ({ ...user, city: newCity }));\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
A questo punto, colleghiamo poi questa funzione all\u2019input del form, gestendo esplicitamente l\u2019evento di modifica:<\/p>\n\n\n
<p<\/span>><\/span>\n<\/span><\/span>  Citt\u00e0:\n<\/span><\/span>  <input<\/span><\/span>\n<\/span><\/span>    type<\/span>=\"text\"<\/span><\/span>\n<\/span><\/span>    [ngModel<\/span>]=\"userCity()\"<\/span><\/span>\n<\/span><\/span>    (ngModelChange<\/span>)=\"updateCity($event)\"<\/span><\/span>\n<\/span><\/span>  \/><\/span>\n<\/span><\/span><\/p<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Questa soluzione, seppur funzionale, non \u00e8 reattiva<\/strong> di per s\u00e9: si basa su una chiamata esplicita della funzione updateCity()<\/strong>, lasciando a noi il compito di mantenere la coerenza dello stato. <\/p>\n\n\n\n
E, come sappiamo, ci\u00f2 non avviene sempre in modo sistematico.<\/p>\n\n\n\n
Per aggirare questa limitazione, possiamo utilizzare linkedSignal()<\/strong><\/code>: una funzione che consente di creare un Signal derivato ma anche scrivibile<\/strong>.<\/p>\n\n\n\n
Combinando il tutto con un effect()<\/strong><\/code>, possiamo ottenere una sorta di sincronizzazione bidirezionale tra il valore derivato e lo stato principale:<\/p>\n\n\n
const userModel = signal({\n<\/span><\/span>  name: 'Davide',\n<\/span><\/span>  lastname: 'Passafaro',\n<\/span><\/span>  city: 'Rome'\n<\/span><\/span>  }\n<\/span><\/span>});\n<\/span><\/span>\n<\/span><\/span>const userCity = linkedSignal(\n<\/span><\/span>  () => () => userModel().city\n<\/span><\/span>);\n<\/span><\/span>\n<\/span><\/span>effect(() => {\n<\/span><\/span>  userModel.set({...userModel(), city: userCity())\n<\/span><\/span>});\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
In questo scenario, il valore di userCity()<\/strong><\/code> \u00e8 derivato da userModel()<\/strong><\/code>, ma pu\u00f2 anche essere aggiornato direttamente tramite userCity.set()<\/strong><\/code>. <\/p>\n\n\n\n
Il nostro form diventa molto pi\u00f9 lineare:<\/p>\n\n\n
<p<\/span>><\/span>Nome: <input<\/span> type<\/span>=\"text\"<\/span> [(ngModel<\/span>)]=\"userName()\"<\/span>><\/span><\/p<\/span>><\/span>\n<\/span><\/span>\n<\/span><\/span><p<\/span>><\/span>Citt\u00e0: <input<\/span> type<\/span>=\"text\"<\/span> [(ngModel<\/span>)]=\"userCity()\"<\/span>><\/span><\/p<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Ogni modifica a userCity()<\/strong><\/code> viene intercettata dall\u2019effect()<\/strong><\/code>, che aggiorna di conseguenza lo stato principale. Otteniamo cos\u00ec una sincronizzazione bidirezionale manuale fatta in casa<\/strong>.<\/p>\n\n\n\n
Splendido!!!<\/p>\n\n\n\n
Beh, non proprio\u2026<\/p>\n\n\n\n
Risolviamo s\u00ec il problema, ma al prezzo di una maggiore complessit\u00e0:<\/p>\n\n\n\n