{"id":25768,"date":"2024-02-07T10:02:34","date_gmt":"2024-02-07T09:02:34","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=25768"},"modified":"2024-02-07T10:02:36","modified_gmt":"2024-02-07T09:02:36","slug":"angular-signal-inputs-verso-i-signal-components","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/","title":{"rendered":"Angular Signal Inputs: verso i Signal Components"},"content":{"rendered":"\n

L’introduzione dei Signal Inputs<\/strong> \u00e8 il primo passo verso i Signal Components<\/strong> e le applicazioni Angular zoneless<\/strong>, introduzione che migliora fin da subito la qualit\u00e0 del nostro codice e l’esperienza di sviluppo. In questo articolo vedremo come utilizzarli.<\/p>\n\n\n\n

\u26a0\ufe0f ATTENZIONE:<\/strong> i Signal Inputs <\/strong>sono ancora ufficialmente in developer preview \u26a0\ufe0f<\/em><\/p>\n\n\n\n

\n\n\n\n

Ciao ciao @Input( ); Benvenuta funzione input( )<\/h1>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Creare un Signal Input<\/strong> \u00e8 piuttosto semplice:
invece di creare un input utilizzando il decoratore @Input( )<\/strong>, dobbiamo utilizzare la funzione input( )<\/strong> fornita da @angular\/core<\/strong>.<\/p>\n\n\n\n

Ecco un esempio di come possiamo creare un input di tipo stringa:<\/p>\n\n\n

import<\/span> { Component, input } 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 = input<string<\/span>>();\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Utilizzando la funzione input( )<\/strong> i nostri input vengono creati di tipo InputSignal<\/strong>, uno speciale tipo di Signal read-only definito cosi:<\/p>\n\n\n\n
\n
* Un InputSignal<\/strong> \u00e8 simile ad un signal non-writable tranne che porta con se informazioni addizionali sulla tipizzazione per la propriet\u00e0 transform, e che  Angular aggiorna internamente il signal quando un nuovo valore viene fornito.<\/p>\n<\/blockquote>\n\n\n\n
Pi\u00f9 precisamente i nostri Signal Inputs<\/strong> sono di questo tipo:<\/p>\n\n\n
myProp: InputSignal<ReadT, WriteT = ReadT> = input<ReadT>(...)\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Dove ReadT<\/em><\/strong> rappresenta il tipo del valore del signal e WriteT<\/em><\/strong> invece il tipo del valore atteso dal componente padre.
Seppure questi due tipi spesso coincidono, approfondiremo il loro ruolo e le differenze tra essi quando parleremo della funzione transform<\/strong> pi\u00f9 avanti.<\/p>\n\n\n\n
Torniamo ora all’esempio precedente concentrandoci sul tipo del nostro input:<\/p>\n\n\n
import<\/span> { Component, InputSignal, input } 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: InputSignal<string<\/span> | undefined<\/span>, string<\/span> | undefined<\/span>> = input<string<\/span>>();\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Quegli undefined<\/strong> sono risultanti dalla natura opzionale<\/strong> del valore dell’input.<\/p>\n\n\n\n
Per specificare che un input \u00e8 required<\/strong>, e sbarazzarci quindi di quei fastidiosi undefined<\/strong>, la nuova input api ci offre una apposita funzione required( )<\/strong>:<\/p>\n\n\n
import<\/span> { Component, InputSignal, input } 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: InputSignal<string<\/span>, string<\/span>> = input.required<string<\/span>>();\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
In alternativa, possiamo fornire un valore di default<\/strong> alla funzione input( )<\/strong>:<\/p>\n\n\n
import<\/span> { Component, InputSignal, input } 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: InputSignal<string<\/span>, string<\/span>> = input<string<\/span>>(''<\/span>);\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Allo stesso modo, il valore di default<\/strong> pu\u00f2 essere fornito anche alla funzione required( )<\/strong>.<\/p>\n\n\n\n
\n\n\n\n
\n\n\n\n
Leggi anche: Angular Control Flow, la guida completa<\/em><\/a><\/p>\n\n\n\n
\n\n\n\n
Niente pi\u00f9 ngOnChanges( )<\/h1>\n\n\n\n
Al giorno d’oggi \u00e8 molto comune utilizzare ngOnChanges<\/strong> o funzioni setter<\/strong> per svolgere azioni quando un determinato input viene aggiornato.<\/p>\n\n\n\n
Con i Signal Inputs,<\/strong> possiamo sfruttare a pieno la potenza dei Signals e sbarazzarci di queste funzioni grazie a due funzionalit\u00e0: computed<\/strong> ed effect<\/strong>.<\/p>\n\n\n\n
Computed Signals<\/h2>\n\n\n\n
Utilizzando la funzione computed<\/strong> possiamo definire valori derivati a partire da altri input, uno o pi\u00f9, che saranno sempre sincronizzati mano a mano che i valori vengono aggiornati:<\/p>\n\n\n
import<\/span> { Component, InputSignal, Signal, computed, input } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({ ... })\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  description: InputSignal<string<\/span>, string<\/span>> = input<string<\/span>>(''<\/span>);\n<\/span><\/span>  descriptionLength: Signal<number<\/span>> = computed(()<\/span> =><\/span> this<\/span>.description.length);\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Dunque ogni volta che l’input description<\/strong> viene modificato, dall’interno e dall’esterno, il valore di descriptionLength<\/strong> viene ricalcolato e aggiornato di conseguenza.<\/p>\n\n\n\n
Effect<\/h2>\n\n\n\n
Con la funzione effect, <\/strong>possiamo invece definire side effects che vengano eseguiti quando i nostri input, uno o pi\u00f9, vengono aggiornati.<\/p>\n\n\n\n
Per esempio, immaginiamo di dover aggiornare una entit\u00e0 proveniente da uno script third-party, che stiamo usando per creare un grafico a barre, quando un input viene aggiornato:<\/p>\n\n\n
import<\/span> Chart from<\/span> 'third-party-charts'<\/span>;\n<\/span><\/span>import<\/span> { effect, Component, InputSignal, input } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({ ... })\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  chartData: InputSignal<string<\/span>[], string<\/span>[]> = input.required<string<\/span>[]>();\n<\/span><\/span>\n<\/span><\/span>  constructor<\/span>(<\/span>) {\n<\/span><\/span>    const<\/span> chart = new<\/span> Chart({ ... });\n<\/span><\/span>\n<\/span><\/span>    effect((onCleanup<\/span><\/span>) =><\/span> {\n<\/span><\/mark>      chart.updateData(this<\/span>.chartData());\n<\/span><\/mark>\n<\/span><\/mark>      onCleanup(()<\/span> =><\/span> {\n<\/span><\/mark>        chart.destroy();\n<\/span><\/mark>      });\n<\/span><\/mark>    });\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
Oppure di dover effettuare una richiesta http:<\/p>\n\n\n
import<\/span> { HttpClient } from<\/span> '@angular\/common\/http'<\/span>;\n<\/span><\/span>import<\/span> { effect, Component, InputSignal, inject, input } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({ ... })\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  myId: InputSignal<string<\/span>, string<\/span>> = input.required<string<\/span>>();\n<\/span><\/span>\n<\/span><\/span>  response: string<\/span> = ''<\/span>;\n<\/span><\/span>\n<\/span><\/span>  constructor<\/span>(<\/span>) {\n<\/span><\/span>    const<\/span> httpClient = inject(HttpClient);\n<\/span><\/span>\n<\/span><\/span>    effect((onCleanup<\/span><\/span>) =><\/span> {\n<\/span><\/mark>      const<\/span> sub = httpClient.get<string<\/span>>(`myurl\/${this<\/span>.myId()}<\/span>\/`<\/span>)\n<\/span><\/mark>        .subscribe((resp<\/span><\/span>) =><\/span> { this<\/span>.response = resp });\n<\/span><\/mark>\n<\/span><\/mark>      onCleanup(()<\/span> =><\/span> {\n<\/span><\/mark>        sub.unsubscribe();\n<\/span><\/mark>      });\n<\/span><\/mark>    });\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
Utilizzare computed<\/strong> ed effect<\/strong> rende i nostri componenti pi\u00f9 robusti e ottimizzati, migliorando inoltre di molto la manutenibilit\u00e0 del nostro codice.<\/p>\n\n\n\n
\n\n\n\n
Alias e funzione transform<\/h1>\n\n\n\n
Per garantire una migrazione degli input creati con @Input( )<\/strong> pi\u00f9 semplice, i Signal Inputs<\/strong> supportano anche la propriet\u00e0 alias<\/strong> e la funzione transform<\/strong>:<\/p>\n\n\n
import<\/span> { HttpClient } from<\/span> '@angular\/common\/http'<\/span>;\n<\/span><\/span>import<\/span> { effect, Component, InputSignal, inject, input } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({ ... })\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  textLength: InputSignal<number<\/span>, string<\/span>> = input<number<\/span>, string<\/span>>(0<\/span>, {\n<\/span><\/span>    alias: 'descriptionText'<\/span>,\n<\/span><\/mark>    transform: (text<\/span><\/span>) =><\/span> text.length\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
In particolare, grazie alla funzione transform<\/strong> possiamo definire una funzione per manipolare il valore del nostro input prima che sia disponibile all’interno del componente, ed \u00e8 proprio qui che entrano in gioco ReadT<\/em><\/strong> e WriteT<\/em><\/strong>.<\/p>\n\n\n\n
Infatti, utilizzare la funzione transform<\/strong> pu\u00f2 portare ad una differenza tra il tipo del valore fornito dal componente padre, rappresentato WriteT<\/em><\/strong>, e il tipo del valore all’interno del nostro Signal Input<\/strong>, rappresentato da ReadT<\/em><\/strong>.<\/p>\n\n\n\n
Per questo motivo, quando creiamo un Signal Input<\/strong> con la funzione<\/strong> transform<\/strong> possiamo specificare entrambi i valori di ReadT<\/em><\/strong> e WriteT<\/em><\/strong> come type arguments della funzione:<\/p>\n\n\n
mySimpleProp: InputSignal<ReadT, WriteT = ReadT> = input<ReadT>(...)\n<\/span><\/span>\n<\/span><\/span>myTransformedProp: InputSignal<ReadT, WriteT> = input<ReadT, WriteT>( ... , {\n<\/span><\/mark>  transform: transformFunction\n<\/span><\/mark>});\n<\/span><\/mark><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Senza la funzione<\/strong> transform<\/strong> il valore di WriteT<\/em><\/strong> \u00e8 valorizzato identico a ReadT<\/em><\/strong>, mentre utilizzando la funzione<\/strong> transform<\/strong> sia ReadT<\/em><\/strong> che WriteT<\/em><\/strong> sono definiti distintamente.<\/p>\n\n\n\n
\n\n\n\n
E per quanto riguarda il two-way binding?<\/h1>\n\n\n\n
Al momento non \u00e8 possibile implementare il two-way binding con i Signal Inputs<\/strong>, ma in futuro verr\u00e0 esposta una nuova api chiamata Model Input<\/strong> che fornir\u00e0 una funzione set( )<\/strong>.<\/p>\n\n\n\n
Stay tuned!!!<\/strong><\/p>\n\n\n\n
\n\n\n\n
Grazie per aver letto questo articolo \ud83d\ude4f<\/h1>\n\n\n\n
Mi piacerebbe avere qualche feedback quindi grazie in anticipo per qualsiasi commento. \ud83d\udc4b<\/p>\n\n\n\n
Un ringraziamento speciale a  <\/strong>Paul Gschwendtner<\/strong><\/a> ed a tutto il Team Angular per questa funzionalit\u00e0<\/a>.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
L’introduzione dei Signal Inputs \u00e8 il primo passo verso i Signal Components e le applicazioni Angular zoneless, introduzione che migliora fin da subito la qualit\u00e0 del nostro codice e l’esperienza di sviluppo. In questo articolo vedremo come utilizzarli. \u26a0\ufe0f ATTENZIONE: i Signal Inputs sono ancora ufficialmente in developer preview \u26a0\ufe0f Ciao ciao @Input( ); Benvenuta funzione input( ) Creare un Signal Input \u00e8… Read more<\/a><\/p>\n","protected":false},"author":200,"featured_media":25792,"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-25768","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 Signal Inputs: verso i Signal Components - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Angular v17.1.0 \u00e8 stato rilasciato recentemente ed introduce una nuova input api che ci mette a disposizione in anteprima i nuovi Signal 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-signal-inputs-verso-i-signal-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Signal Inputs: verso i Signal Components\" \/>\n<meta property=\"og:description\" content=\"Angular v17.1.0 \u00e8 stato rilasciato recentemente ed introduce una nuova input api che ci mette a disposizione in anteprima i nuovi Signal Inputs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/\" \/>\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-07T09:02:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-07T09:02:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\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=\"4 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-signal-inputs-verso-i-signal-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/\"},\"author\":{\"name\":\"Davide Passafaro\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\"},\"headline\":\"Angular Signal Inputs: verso i Signal Components\",\"datePublished\":\"2024-02-07T09:02:34+00:00\",\"dateModified\":\"2024-02-07T09:02:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/\"},\"wordCount\":751,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.png\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/\",\"name\":\"Angular Signal Inputs: verso i Signal Components - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.png\",\"datePublished\":\"2024-02-07T09:02:34+00:00\",\"dateModified\":\"2024-02-07T09:02:36+00:00\",\"description\":\"Angular v17.1.0 \u00e8 stato rilasciato recentemente ed introduce una nuova input api che ci mette a disposizione in anteprima i nuovi Signal Inputs.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.png\",\"width\":1920,\"height\":1080,\"caption\":\"angular signal components\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#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 Signal Inputs: verso i Signal Components\"}]},{\"@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 Signal Inputs: verso i Signal Components - Codemotion Magazine","description":"Angular v17.1.0 \u00e8 stato rilasciato recentemente ed introduce una nuova input api che ci mette a disposizione in anteprima i nuovi Signal 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-signal-inputs-verso-i-signal-components\/","og_locale":"en_US","og_type":"article","og_title":"Angular Signal Inputs: verso i Signal Components","og_description":"Angular v17.1.0 \u00e8 stato rilasciato recentemente ed introduce una nuova input api che ci mette a disposizione in anteprima i nuovi Signal Inputs.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-02-07T09:02:34+00:00","article_modified_time":"2024-02-07T09:02:36+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/"},"author":{"name":"Davide Passafaro","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828"},"headline":"Angular Signal Inputs: verso i Signal Components","datePublished":"2024-02-07T09:02:34+00:00","dateModified":"2024-02-07T09:02:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/"},"wordCount":751,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.png","keywords":["Angular"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/","name":"Angular Signal Inputs: verso i Signal Components - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.png","datePublished":"2024-02-07T09:02:34+00:00","dateModified":"2024-02-07T09:02:36+00:00","description":"Angular v17.1.0 \u00e8 stato rilasciato recentemente ed introduce una nuova input api che ci mette a disposizione in anteprima i nuovi Signal Inputs.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.png","width":1920,"height":1080,"caption":"angular signal components"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-signal-inputs-verso-i-signal-components\/#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 Signal Inputs: verso i Signal Components"}]},{"@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-open-source-min-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min-600x600.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-open-source-min.png",1920,1080,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min-300x169.png",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min-768x432.png",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min-1536x864.png",1536,864,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.png",1920,1080,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min-100x100.png",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_comment_info":0,"uagb_excerpt":"L’introduzione dei Signal Inputs \u00e8 il primo passo verso i Signal Components e le applicazioni Angular zoneless, introduzione che migliora fin da subito la qualit\u00e0 del nostro codice e l’esperienza di sviluppo. In questo articolo vedremo come utilizzarli. \u26a0\ufe0f ATTENZIONE: i Signal Inputs sono ancora ufficialmente in developer preview \u26a0\ufe0f Ciao ciao @Input( ); Benvenuta funzione input( ) Creare un Signal Input \u00e8……","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/25768","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=25768"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/25768\/revisions"}],"predecessor-version":[{"id":25796,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/25768\/revisions\/25796"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/25792"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=25768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=25768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=25768"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=25768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}