{"id":26417,"date":"2024-03-12T17:28:06","date_gmt":"2024-03-12T16:28:06","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=26417"},"modified":"2024-03-12T17:29:16","modified_gmt":"2024-03-12T16:29:16","slug":"angular-signal-queries-leggi-il-dom-senza-sforzo","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-queries-leggi-il-dom-senza-sforzo\/","title":{"rendered":"Angular Signal Queries: leggi il DOM senza sforzo!"},"content":{"rendered":"\n

<\/p>\n\n\n\n

Dopo l’introduzione dei Signal Inputs<\/a><\/strong> e dei Model Inputs<\/a><\/strong>, una nuova Signal<\/strong> API \u00e8 disponibile nell’ecosistema Angular con la versione 17.2.0: le Signal Queries<\/strong>.<\/p>\n\n\n\n

Le Signal Queries<\/strong> offrono un approccio alternativo alle query basate sui decoratori, ovvero @ViewChild<\/strong><\/code>, @ViewChildren<\/strong><\/code>, @ContentChild<\/strong><\/code> e @ContentChildren<\/strong><\/code>, <\/strong>fornendoci i risultati sotto forma di Signal<\/strong>.<\/p>\n\n\n\n

Grazie alle query possiamo ricavare istanze di componenti, direttive, elementi DOM, e molto altro. Diamo uno sguardo a cosa \u00e8 cambiato con le nuove Signal Queries.<\/strong><\/p>\n\n\n\n

\n

\u26a0\ufe0f ATTENZIONE:<\/strong> le nuove Signal Queries <\/strong>sono ancora in developer preview \u26a0\ufe0f<\/p>\n<\/blockquote>\n\n\n\n

\n\n\n\n

View queries<\/h2>\n\n\n\n

Le view queries ci permettono di interagire direttamente con gli elementi presenti all’interno del template di un componente, anche detto view<\/strong>.<\/p>\n\n\n\n

Entrambi i decoratori @ViewChild<\/strong><\/code> e @ViewChildren<\/strong><\/code> hanno ora una controparte Signal<\/strong>.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

viewChild<\/h3>\n\n\n\n

Utilizzando la funzione viewChild<\/strong><\/code> possiamo ricavare l’istanza di un singolo elemento:<\/p>\n\n\n\n

import<\/span> { Component, ElementRef, Signal, viewChild } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  selector: 'my-component'<\/span>,\n<\/span><\/span>  standalone: true<\/span>,\n<\/span><\/span>  template: '<input #inputEl \/>'<\/span>,\n<\/span><\/mark>})\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  inputElement: Signal<ElementRef | undefined<\/span>> = viewChild('inputEl'<\/span>);\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre><\/div><\/div>\n\n\n\n
Questa funzione accetta tutti i parametri accettati dal decoratore @ViewChild<\/strong><\/code>, e offre le stesse funzionalit\u00e0, fornendo per\u00f2 il risultato sotto forma di Signal<\/strong>.<\/p>\n\n\n\n
Nel caso in cui la presenza di almeno un elemento che rispetta la query \u00e8 certa, e vogliamo rimuovere quel undefined<\/strong><\/code>, possiamo usare la funzione viewChild.required()<\/strong><\/code>:<\/p>\n\n\n
import<\/span> { Component, ElementRef, Signal, viewChild } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  selector: 'my-component'<\/span>,\n<\/span><\/span>  standalone: true<\/span>,\n<\/span><\/span>  template: '<input #inputEl \/>'<\/span>,\n<\/span><\/mark>})\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  inputElement: Signal<ElementRef> = viewChild.required('inputEl'<\/span>);\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Attenzione per\u00f2, quando una query required<\/strong> non trova alcun risultato, Angular<\/strong> solleva un apposito errore:<\/strong><\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
viewChildren<\/h3>\n\n\n\n
Utilizzando la funzione viewChildren<\/strong><\/code><\/strong><\/code> possiamo invece ricavare l’istanza di pi\u00f9 elementi:<\/p>\n\n\n
import<\/span> { Component, ElementRef, Signal, viewChildren } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  selector: 'my-component'<\/span>,\n<\/span><\/span>  standalone: true<\/span>,\n<\/span><\/span>  template: `<\/span>\n<\/span><\/span>    <input #inputEl \/><\/span>\n<\/span><\/mark><\/span>\n<\/span><\/span>    @if (showSecondInput) {<\/span>\n<\/span><\/span>      <input #inputEl \/><\/span>\n<\/span><\/mark>    }<\/span>\n<\/span><\/span>  `<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  showSecondInput = true<\/span>;\n<\/span><\/span>\n<\/span><\/span>  inputElementList: Signal<readonly ElementRef[]> = viewChildren('inputEl'<\/span>);\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Simile a quanto visto per viewChild<\/strong><\/code>, anche la funzione viewChildren<\/strong><\/code> accetta tutti i parametri accettati dal decoratore @ViewChildren<\/strong><\/code>, e offre le stesse funzionalit\u00e0, fornendo anch’essa il risultato sotto forma di Signal<\/strong>.<\/p>\n\n\n\n
Quando una query viewChildren<\/strong><\/code> <\/strong>non trova alcune risultato, il suo valore \u00e8 un array vuoto<\/strong>. Questo garantisce che qualunque risultato sia sempre accessibile in sicurezza.<\/p>\n\n\n\n
\n\n\n\n
Content queries<\/h2>\n\n\n\n
Le content queries ci permettono di interagire direttamente con gli elementi presenti all’interno del contenuto di un componente.<\/p>\n\n\n\n
Per contenuto di un componente si intende il gruppo di elementi passati tramite content projection<\/strong>, ovvero quando inseriamo alcuni elementi all’interno del tag del nostro componente, quando lo utilizziamo in un determinato template. Ad esempio:<\/p>\n\n\n
<my-component<\/span>><\/span>\n<\/span><\/span>  <span<\/span>><\/span> Hello ;) <\/span<\/span>><\/span>\n<\/span><\/mark>\n<\/span><\/mark>  <input<\/span> #inputEl<\/span> \/><\/span>\n<\/span><\/mark><\/my-component<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
<\/p>\n\n\n\n
\n
Nota: <\/strong>a parte per la sezione di template dove vengono svolte le query, le content queries<\/strong> API e le view queries<\/strong> API sono identiche.
Per questo, la prossima sezione dell’articolo riprende quasi interamente la precedente.<\/p>\n\n\n\n
<\/p>\n<\/blockquote>\n\n\n\n
Similmente a quanto abbiamo visto con le view queries, anche @ContentChild<\/strong><\/code> e @ContentChildren<\/strong><\/code> hanno ora una controparte Signal<\/strong>.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
contentChild<\/h3>\n\n\n\n
Utilizzando le funzioni contentChild<\/strong><\/code> e contentChild.required()<\/strong><\/code> possiamo ricavare l’istanza di un singolo elemento:<\/p>\n\n\n
import<\/span> { Component, contentChild, ElementRef, Signal } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  selector: 'my-component'<\/span>,\n<\/span><\/span>  standalone: true<\/span>,\n<\/span><\/span>  template: `<\/span>\n<\/span><\/span>    <div><\/span>\n<\/span><\/span>      <ng-content \/><\/span>\n<\/span><\/mark>    <\/div><\/span>\n<\/span><\/span>  `<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  inputElement: Signal<ElementRef | undefined<\/span>> = contentChild('inputEl'<\/span>);\n<\/span><\/mark>\n<\/span><\/span>  inputElementReq: Signal<ElementRef> = contentChild.required('inputEl'<\/span>);\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Anche qui, come gi\u00e0 visto per la funzione viewChild<\/strong><\/code>, quando una required query non trova alcun risultato, Angular<\/strong> solleva un apposito errore<\/strong>:<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
contentChildren<\/h3>\n\n\n\n
Utilizzando la funzione contentChildren<\/strong><\/code><\/strong><\/code><\/strong><\/code> possiamo invece ricavare l’istanza di pi\u00f9 elementi:<\/p>\n\n\n
import<\/span> { Component, contentChildren, ElementRef, Signal } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  selector: 'my-component'<\/span>,\n<\/span><\/span>  standalone: true<\/span>,\n<\/span><\/span>  template: `<\/span>\n<\/span><\/span>    <div><\/span>\n<\/span><\/span>      <ng-content \/><\/span>\n<\/span><\/mark>    <\/div><\/span>\n<\/span><\/span>  `<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  inputElementList: Signal<readonly ElementRef[]> = contentChildren('inputEl'<\/span>);\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Similmente a quanto abbiamo visto con la funzione viewChildren<\/strong><\/code>, quando una query contentChildren<\/strong><\/code><\/strong><\/code> <\/strong>non trova alcun risultato, il suo valore \u00e8 un array vuoto<\/strong>.<\/p>\n\n\n\n
\n\n\n\n
Alcune regole a cui prestare attenzione<\/h2>\n\n\n\n
Le nuove funzioni, viewChild<\/strong><\/code>, viewChildren<\/strong><\/code>, contentChild<\/strong><\/code> e contentChildren<\/strong><\/code>, funzionano solamente se usate per inizializzare una propriet\u00e0 di un componente o direttiva.<\/p>\n\n\n\n
Utilizzandole diversamente non verr\u00e0 generato alcun errore, ma la query non fornir\u00e0 alcun risultato:<\/p>\n\n\n
import<\/span> { Component, ElementRef, Signal, viewChild } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  selector: 'my-component'<\/span>,\n<\/span><\/span>  standalone: true<\/span>,\n<\/span><\/span>  template: `<\/span>\n<\/span><\/span>    <div #el><\/div><\/span>\n<\/span><\/mark>  `<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  el = viewChild('el'<\/span>); \/\/ It works!<\/span>\n<\/span><\/mark>\n<\/span><\/span>  constructor<\/span>(<\/span>) {\n<\/span><\/span>    const<\/span> myEl: Signal<undefined<\/span>> = viewChild('el'<\/span>); \/\/ No error<\/span>\n<\/span><\/mark>    console<\/span>.log(myEl()); \/\/ undefined<\/span>\n<\/span><\/mark>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
Signal Queries vs Decorator Queries<\/h2>\n\n\n\n
Ottenere i risultati delle query sotto forma di Signal<\/strong> significa che possiamo comporli con altri Signal<\/strong><\/code>, utilizzando ad esempio le funzioni computed<\/strong><\/code> ed effect<\/strong><\/code>.<\/p>\n\n\n\n
Questo \u00e8 gi\u00e0 di per se un grande vantaggio, poich\u00e9 migliora la flessibilit\u00e0 e la funzionalit\u00e0 della nostra codebase, aprendo la strada inoltre a tutti i miglioramenti nella change detection che i Signals<\/strong> hanno portando all’interno framework.<\/p>\n\n\n\n
In aggiunta, le Signal Queries<\/strong> offrono per\u00f2 altri vantaggi:<\/p>\n\n\n\n
Quando una query non trova alcun risultato, il suo valore \u00e8 undefined<\/strong><\/code>.
Questo caso \u00e8 molto comune quando si utilizza il Control Flow<\/a><\/strong> con @if<\/strong><\/code> e @for<\/strong><\/code>. 
Proprio per questo motivo, il valore di un viewChild<\/strong><\/code> Signal<\/strong> ha come tipo ElementRef | undefined<\/strong><\/code>.<\/p>\n\n\n\n