{"id":26021,"date":"2024-02-21T10:37:36","date_gmt":"2024-02-21T09:37:36","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=26021"},"modified":"2024-02-21T10:40:32","modified_gmt":"2024-02-21T09:40:32","slug":"angular-model-inputs-two-way-binding-con-i-signal-inputs","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/","title":{"rendered":"Angular Model Inputs: two-way binding con i\u00a0Signal Inputs"},"content":{"rendered":"\n


Angular v17.2.0<\/strong> introduce una nuova api che ci consente di utilizzare il two-way binding con i Signal Inputs: Model Inputs<\/strong>.<\/p>\n\n\n\n

Prima di procedere, ti suggerisco di leggere il mio precedente articolo \u201cAngular Signal Inputs: verso i Signal Components<\/a><\/strong>\u201d, nel quale ho approfondito i Signal Inputs e come utilizzarli.<\/p>\n\n\n\n

Questo articolo \u00e8 strettamente legato al precedente, ed \u00e8 pensato per rispondere al punto aperto riguardo il two-way binding<\/strong> con i Signal Inputs<\/strong>.<\/p>\n\n\n\n

Ora che i Model Inputs<\/strong> sono disponibili \u00e8 tempo di approfondirne il funzionamento.<\/p>\n\n\n\n

\n

\u26a0\ufe0f ATTENZIONE:<\/strong> i Model Inputs <\/strong>sono ancora in developer preview \u26a0\ufe0f<\/p>\n<\/blockquote>\n\n\n\n

\n\n\n\n

Come creare un Model Input<\/h3>\n\n\n\n

Similmente ai Signal Inputs, i nuovi Model Inputs<\/strong> sono pensati per permetterci di sostituire i classici input creati con il decoratore @Input( )<\/strong>, sotto forma di Signal.<\/p>\n\n\n\n

Per creare un Model Input<\/strong> non dobbiamo far altro che usare la funzione model( )<\/strong> messa a disposizione dal pacchetto @angular\/core<\/strong>:<\/p>\n\n\n

import<\/span> { Component, model, ModelSignal } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({ ... })\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  myProp: ModelSignal<string<\/span> | undefined<\/span>> = model<string<\/span>>();\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
I nostri input risulteranno di tipo ModelSignal<\/strong>, uno speciale tipo di Signal che Angular aggiorner\u00e0 internamente ogni volta che un nuovo valore viene fornito.<\/p>\n\n\n\n
La funzione update( )<\/h4>\n\n\n\n
L’utilizzo del two-way binding consente a due componenti padre e figlio di aggiornare il valore collegato ad un input, e di condividere infine lo stesso valore.<\/p>\n\n\n\n
Per consentire l’aggiornamento da parte di un componente figlio, l’api ModelSignal<\/strong> ci fornisce una funzione update( )<\/strong> dedicata, per aggiornare un input partendo dal suo valore corrente:<\/p>\n\n\n
updateProp(): void<\/span> {\n<\/span><\/span>  this<\/span>.myProp.update((current<\/span><\/span>) =><\/span> current + ' - Updated!!!'<\/span>);\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Utilizzare il two-way binding<\/strong><\/h4>\n\n\n\n
Utilizzando la sintassi two-way binding<\/strong> per passare un valore da un componente padre ad un componente figlio, l’aggiornamento di un ModelSignal <\/strong>risalir\u00e0 fino al componente padre:<\/p>\n\n\n
<my-component<\/span><\/span>\n<\/span><\/span>  [(myProp<\/span>)]=\"parentProp\"<\/span><\/span>\n<\/span><\/mark>  (myPropChange<\/span>)=\"onPropChangeMethod($event)\"<\/span><\/span>\n<\/span><\/mark>><\/span><\/my-component<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Entrambi i componenti padre e figlio avranno dunque il valore dell’input sincronizzato.
Il componente padre sar\u00e0 inoltre notificato tramite un output, il cui nome sar\u00e0 composto a partire dal nome dell’input con l’aggiunta della parola Change<\/strong><\/code> alla fine, con il nuovo valore all’interno dell’oggetto allegato all’evento.<\/p>\n\n\n\n
\n\n\n\n
Model Inputs con valore di default o required<\/h3>\n\n\n\n
Come avrete notato nei precedenti esempi, creando un Model Input<\/strong> \u00e8 possibile fornire alla funzione model( )<\/strong> un tipo come argomento per definire il tipo del valore del ModelSignal<\/strong>:<\/p>\n\n\n
import<\/span> { Component, model, ModelSignal } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({ ... })\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  myProp: ModelSignal<string<\/span> | undefined<\/span>> = model<string<\/span>>();\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Data la natura opzionale<\/strong> del valore di un input, il valore di un ModelSignal<\/strong> viene definito come un possibile undefined.<\/strong><\/p>\n\n\n\n
Per liberarcene, possiamo fornire un valore di default<\/strong> alla funzione model( )<\/strong>:<\/p>\n\n\n
myProp: ModelSignal<string<\/span>> = model('default'<\/span>);\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
In alternativa, possiamo definire un Model Inputs<\/strong> come required utilizzando la funzione model.required( )<\/strong> function:<\/p>\n\n\n
myRequiredProp: ModelSignal<string<\/span>> = model.required<string<\/span>>();\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
Input options: alias e funzione transform<\/h3>\n\n\n\n
Come per i classici input in Angular, i Model Inputs <\/strong>supportano l’opzione alias<\/strong>:<\/p>\n\n\n
myProp = model('default-value'<\/span>, { alias: 'myPropAlias'<\/span> });\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Questa opzione ci permette di disaccoppiare il nome della variabile input del componente figlio dal nome della propriet\u00e0 del DOM usata dal componente padre per passare un valore di input:<\/p>\n\n\n
<my-component<\/span> [(myPropAlias<\/span>)]=\"parentProp\"<\/span>><\/span><\/my-component<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Dov’\u00e8 la funzione transform( )?<\/h4>\n\n\n\n
Per quanto riguarda la funzione transform( )<\/strong>, l’ultima opzione degli input classici, non \u00e8 supportata dalla funzione model( )<\/strong>.<\/p>\n\n\n\n
Personalmente trovo che questo abbia ha senso, immaginate soltanto i conflitti tra la natura “two-way” dei Model Inputs<\/strong>, e il ruolo della funzione transform( )<\/strong> di manipolare il valore di un input solamente all’interno di un componente.<\/p>\n\n\n\n
Fortunatamente, possiamo aggirare questa limitazione utilizzando la funzione computed( )<\/strong>, che ci permette di creare dati derivati a partire da uno o pi\u00f9 Signals:<\/p>\n\n\n
import<\/span> { Component, computed, model, ModelSignal, Signal } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({ ... })\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  myProp: ModelSignal<string<\/span>> = model('default'<\/span>);\n<\/span><\/mark>\n<\/span><\/span>  myComposedProp: Signal<number<\/span>> = computed(\n<\/span><\/mark>    ()<\/span> =><\/span> this<\/span>.modelOptional()?.length || 0<\/span>\n<\/span><\/mark>  );\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
In questo modo il valore ottenuto tramite la funzione computed( )<\/strong> \u00e8 inoltre confinato all’interno del componente figlio.<\/p>\n\n\n\n
\n\n\n\n
Grazie per aver letto questo articolo \ud83d\ude4f<\/h3>\n\n\n\n
Per quanto riguarda i Model Inputs<\/strong> \u00e8 tutto.<\/p>\n\n\n\n
Se ancora non lo hai fatto, ti consiglio di leggere il mio precedente articolo \u201cAngular Signal Inputs: verso i Signal Components<\/a><\/strong>\u201d. 
Troverai una spiegazione pi\u00f9 completa riguardo i vantaggi nell’utilizzo dei Signal Inputs<\/strong> e Model Inputs<\/strong>.<\/p>\n\n\n\n
E come sempre, mi piacerebbe avere qualche feedback quindi grazie in anticipo per qualsiasi commento. \ud83d\udc4b<\/p>\n","protected":false},"excerpt":{"rendered":"
Angular v17.2.0 introduce una nuova api che ci consente di utilizzare il two-way binding con i Signal Inputs: Model Inputs. Prima di procedere, ti suggerisco di leggere il mio precedente articolo \u201cAngular Signal Inputs: verso i Signal Components\u201d, nel quale ho approfondito i Signal Inputs e come utilizzarli. Questo articolo \u00e8 strettamente legato al precedente,… Read more<\/a><\/p>\n","protected":false},"author":200,"featured_media":26069,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10265],"tags":[11586],"collections":[11708],"class_list":{"0":"post-26021","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-it","8":"tag-angular-it","9":"collections-dalla-community","10":"entry"},"yoast_head":"\nAngular Model Inputs: two-way binding con i\u00a0Signal Inputs - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Con il rilascio di Angular v17.2.0 l'integrazione dei Signals compie passi avanti, introducendo una nuova importantissima api: Model Inputs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Model Inputs: two-way binding con i\u00a0Signal Inputs\" \/>\n<meta property=\"og:description\" content=\"Con il rilascio di Angular v17.2.0 l'integrazione dei Signals compie passi avanti, introducendo una nuova importantissima api: Model Inputs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-21T09:37:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-21T09:40:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png\" \/>\n\t<meta property=\"og:image:width\" content=\"992\" \/>\n\t<meta property=\"og:image:height\" content=\"558\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Davide Passafaro\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Davide Passafaro\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/\"},\"author\":{\"name\":\"Davide Passafaro\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\"},\"headline\":\"Angular Model Inputs: two-way binding con i\u00a0Signal Inputs\",\"datePublished\":\"2024-02-21T09:37:36+00:00\",\"dateModified\":\"2024-02-21T09:40:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/\"},\"wordCount\":597,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/\",\"name\":\"Angular Model Inputs: two-way binding con i\u00a0Signal Inputs - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png\",\"datePublished\":\"2024-02-21T09:37:36+00:00\",\"dateModified\":\"2024-02-21T09:40:32+00:00\",\"description\":\"Con il rilascio di Angular v17.2.0 l'integrazione dei Signals compie passi avanti, introducendo una nuova importantissima api: Model Inputs.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png\",\"width\":992,\"height\":558,\"caption\":\"angular input two way\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular Model Inputs: two-way binding con i\u00a0Signal Inputs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\",\"name\":\"Davide Passafaro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png\",\"caption\":\"Davide Passafaro\"},\"description\":\"My name is Davide Passafaro and I am Senior Frontend Engineer at Awork. I lead two developer communities in Rome, GDG Roma Citt\u00e0 and Angular Rome, and actively contribute to the tech community as a writer and speaker. When i shut down my computer I like to play board games and archery, not both together till now. I also like escape rooms and memes.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/davide-passafaro\/\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular Model Inputs: two-way binding con i\u00a0Signal Inputs - Codemotion Magazine","description":"Con il rilascio di Angular v17.2.0 l'integrazione dei Signals compie passi avanti, introducendo una nuova importantissima api: Model Inputs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/","og_locale":"en_US","og_type":"article","og_title":"Angular Model Inputs: two-way binding con i\u00a0Signal Inputs","og_description":"Con il rilascio di Angular v17.2.0 l'integrazione dei Signals compie passi avanti, introducendo una nuova importantissima api: Model Inputs.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-02-21T09:37:36+00:00","article_modified_time":"2024-02-21T09:40:32+00:00","og_image":[{"width":992,"height":558,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png","type":"image\/png"}],"author":"Davide Passafaro","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Davide Passafaro","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/"},"author":{"name":"Davide Passafaro","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828"},"headline":"Angular Model Inputs: two-way binding con i\u00a0Signal Inputs","datePublished":"2024-02-21T09:37:36+00:00","dateModified":"2024-02-21T09:40:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/"},"wordCount":597,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png","keywords":["Angular"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/","name":"Angular Model Inputs: two-way binding con i\u00a0Signal Inputs - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png","datePublished":"2024-02-21T09:37:36+00:00","dateModified":"2024-02-21T09:40:32+00:00","description":"Con il rilascio di Angular v17.2.0 l'integrazione dei Signals compie passi avanti, introducendo una nuova importantissima api: Model Inputs.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png","width":992,"height":558,"caption":"angular input two way"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-model-inputs-two-way-binding-con-i-signal-inputs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"Angular Model Inputs: two-way binding con i\u00a0Signal Inputs"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828","name":"Davide Passafaro","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png","caption":"Davide Passafaro"},"description":"My name is Davide Passafaro and I am Senior Frontend Engineer at Awork. I lead two developer communities in Rome, GDG Roma Citt\u00e0 and Angular Rome, and actively contribute to the tech community as a writer and speaker. When i shut down my computer I like to play board games and archery, not both together till now. I also like escape rooms and memes.","sameAs":["https:\/\/www.linkedin.com\/in\/davide-passafaro\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way-600x558.png","author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png",992,558,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way-300x169.png",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way-768x432.png",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png",992,558,false],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png",992,558,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way.png",992,558,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way-100x100.png",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/angular-two-way-600x558.png",600,558,true]},"uagb_author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_comment_info":0,"uagb_excerpt":"Angular v17.2.0 introduce una nuova api che ci consente di utilizzare il two-way binding con i Signal Inputs: Model Inputs. Prima di procedere, ti suggerisco di leggere il mio precedente articolo \u201cAngular Signal Inputs: verso i Signal Components\u201d, nel quale ho approfondito i Signal Inputs e come utilizzarli. Questo articolo \u00e8 strettamente legato al precedente,……","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/26021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/200"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=26021"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/26021\/revisions"}],"predecessor-version":[{"id":26071,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/26021\/revisions\/26071"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/26069"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=26021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=26021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=26021"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=26021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}