{"id":25705,"date":"2024-02-07T10:07:21","date_gmt":"2024-02-07T09:07:21","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=25705"},"modified":"2024-02-07T10:07:23","modified_gmt":"2024-02-07T09:07:23","slug":"angular-signal-inputs","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-signal-inputs\/","title":{"rendered":"Angular Signal Inputs: road to Signal Components"},"content":{"rendered":"\n

Signal Inputs<\/strong> introduction is the initial act of the upcoming rise of Signal Components<\/strong> and zoneless<\/strong> Angular applications, enhancing already both code quality and developer experience. Let\u2019s delve into how they work.<\/p>\n\n\n\n

\u26a0\ufe0f ALERT:<\/strong> new Signal Inputs <\/strong>are still in developer preview \u26a0\ufe0f<\/em><\/p>\n\n\n\n

\n\n\n\n

Bye @Input( ) decorator; Welcome input( ) function<\/h1>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Creating a Signal Input<\/strong> is quite simple:
rather than creating an input using the @Input( )<\/strong> decorator, you should now use the input( )<\/strong> function provided by @angular\/core<\/strong>.<\/p>\n\n\n\n

Let\u2019s see an example of creating an input of string type:<\/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
Using the input( )<\/strong> function your inputs will be typed as InputSignal<\/strong>, a special type of read-only Signal defined as follows:<\/p>\n\n\n\n
\n
* An InputSignal<\/strong> is similar to a non-writable signal except that it also carries additional type-information for transforms, and that Angular internally updates the signal whenever a new value is bound.<\/p>\n<\/blockquote>\n\n\n\n
More specifically your Signal Inputs<\/strong> will be typed as the following:<\/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
Where ReadT<\/em><\/strong> represents the type of the signal value and WriteT<\/em><\/strong> represents the type of the expected value from the parent.
Although these types are often the same, I\u2019ll delve deeper into their role and differences discussing the transform<\/strong> function later on.<\/p>\n\n\n\n
Let\u2019s go back to the previous example focusing on the input value type:<\/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
Those undefined<\/strong> are given by the optional<\/strong> nature of the input value.<\/p>\n\n\n\n
To define your input as required<\/strong>, and thus get rid of those nasty undefined<\/strong>, the input api offers a dedicated required( )<\/strong> function:<\/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
Alternatively, you can provide a default value<\/strong> to the input( ) <\/strong>function:<\/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
The default value<\/strong> can be provided to the required( )<\/strong> as well.<\/p>\n\n\n\n
\n\n\n\n
\n\n\n\n
Read also: Angular Control Flow, the Complete Guide<\/em><\/strong><\/a><\/p>\n\n\n\n
\n\n\n\n
No more ngOnChanges( )<\/h1>\n\n\n\n
Nowadays you typically use ngOnChanges<\/strong> and setter<\/strong> functions to perform actions when an input is updated.<\/p>\n\n\n\n
With Signal Inputs,<\/strong> you can take advantage of the great flexibility of Signals to get rid of those functions using two powerful tools: computed<\/strong> and effect<\/strong>.<\/p>\n\n\n\n
Computed Signals<\/h2>\n\n\n\n
Using computed<\/strong> you can easily define derived values starting from your inputs, one or more, that will be always updated based on the latest values:<\/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
So each time the description<\/strong> value is modified, the value of descriptionLength<\/strong> is recalculated and updated accordingly.<\/p>\n\n\n\n
Effect<\/h2>\n\n\n\n
With effect, <\/strong>you can define side effects to run when your inputs, one or more, are updated.<\/p>\n\n\n\n
For example, imagine you need to update a third-party script you are using to build your chart component when an input is updated:<\/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
Or even perform an http request:<\/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
Using computed<\/strong> and effect<\/strong> will make your components more robust and optimized, enhancing also a lot the maintainability of the code.<\/p>\n\n\n\n
\n\n\n\n
Alias and transform function<\/h1>\n\n\n\n
In order to guarantee a smoother migration from decorator-based inputs, Signal Inputs<\/strong> supports also alias<\/strong> and transform function<\/strong> properties:<\/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 particular, thanks to the transform function<\/strong> you can define a function that manipulates your input before it is available in the component scope and this is where the difference between ReadT<\/em><\/strong> and WriteT<\/em><\/strong> comes into play.<\/p>\n\n\n\n
In fact, using the transform function<\/strong> can create a mismatch between the type of the value being set from the parent, represented by WriteT<\/em><\/strong>, and the type of the value stored inside your Signal Input<\/strong>, represented by ReadT<\/em><\/strong>.<\/p>\n\n\n\n
For this reason, when creating a Signal Input<\/strong> with the transform function<\/strong> you can specify both ReadT<\/em><\/strong> and WriteT<\/em><\/strong> as the function type arguments:<\/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
As you can see, without the transform function<\/strong> the value of WriteT<\/em><\/strong> is set as identical to ReadT<\/em><\/strong>, while using the transform function<\/strong> both ReadT<\/em><\/strong> and WriteT<\/em><\/strong> are defined distinctly.<\/p>\n\n\n\n
\n\n\n\n
What about two-way binding?<\/h1>\n\n\n\n
Currently, there is no way to implement two-way binding with Signal Inputs<\/strong>, but in the future, there will be an api called Model Input<\/strong> that will expose a set( )<\/strong> function to fulfill this behavior.<\/p>\n\n\n\n
So stay tuned!!!<\/strong><\/p>\n\n\n\n
\n\n\n\n
Thanks for reading so far \ud83d\ude4f<\/h1>\n\n\n\n
I\u2019d like to have your feedback so please feel free to contact me for any. \ud83d\udc4b<\/p>\n\n\n\n
Special thanks to <\/strong>Paul Gschwendtner<\/strong><\/a> and to the Angular Team for <\/strong>this<\/strong><\/a> feature<\/a>.<\/strong><\/p>\n\n\n\n
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Signal Inputs introduction is the initial act of the upcoming rise of Signal Components and zoneless Angular applications, enhancing already both code quality and developer experience. Let\u2019s delve into how they work. \u26a0\ufe0f ALERT: new Signal Inputs are still in developer preview \u26a0\ufe0f Bye @Input( ) decorator; Welcome input( ) function Creating a Signal Input is quite simple:rather than creating an input using the @Input( ) decorator, you… 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":[6],"tags":[],"collections":[],"class_list":{"0":"post-25705","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"entry"},"yoast_head":"\nAngular Signal Inputs: road to Signal Components - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Angular v17.1.0 has been released recently and it introduced a new amazing\u00a0input\u00a0api designed to enable early access to\u00a0Signal 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\/frontend\/angular-signal-inputs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Signal Inputs: road to Signal Components\" \/>\n<meta property=\"og:description\" content=\"Angular v17.1.0 has been released recently and it introduced a new amazing\u00a0input\u00a0api designed to enable early access to\u00a0Signal Inputs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-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-07T09:07:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-07T09:07:23+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\\\/frontend\\\/angular-signal-inputs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/angular-signal-inputs\\\/\"},\"author\":{\"name\":\"Davide Passafaro\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/79170e2a1bfc41ddeaa10827ce803828\"},\"headline\":\"Angular Signal Inputs: road to Signal Components\",\"datePublished\":\"2024-02-07T09:07:21+00:00\",\"dateModified\":\"2024-02-07T09:07:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/angular-signal-inputs\\\/\"},\"wordCount\":769,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/angular-signal-inputs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/Angular-open-source-min.png\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/angular-signal-inputs\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/angular-signal-inputs\\\/\",\"name\":\"Angular Signal Inputs: road to Signal Components - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/angular-signal-inputs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/angular-signal-inputs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/Angular-open-source-min.png\",\"datePublished\":\"2024-02-07T09:07:21+00:00\",\"dateModified\":\"2024-02-07T09:07:23+00:00\",\"description\":\"Angular v17.1.0 has been released recently and it introduced a new amazing\u00a0input\u00a0api designed to enable early access to\u00a0Signal Inputs.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/angular-signal-inputs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/angular-signal-inputs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/angular-signal-inputs\\\/#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\\\/frontend\\\/angular-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\\\/frontend\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular Signal Inputs: road to 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\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Immagine-profilo-GDE-430kb-100x100.png\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Immagine-profilo-GDE-430kb-100x100.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Immagine-profilo-GDE-430kb-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: road to Signal Components - Codemotion Magazine","description":"Angular v17.1.0 has been released recently and it introduced a new amazing\u00a0input\u00a0api designed to enable early access to\u00a0Signal 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\/frontend\/angular-signal-inputs\/","og_locale":"en_US","og_type":"article","og_title":"Angular Signal Inputs: road to Signal Components","og_description":"Angular v17.1.0 has been released recently and it introduced a new amazing\u00a0input\u00a0api designed to enable early access to\u00a0Signal Inputs.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-signal-inputs\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-02-07T09:07:21+00:00","article_modified_time":"2024-02-07T09:07:23+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\/frontend\/angular-signal-inputs\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-signal-inputs\/"},"author":{"name":"Davide Passafaro","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828"},"headline":"Angular Signal Inputs: road to Signal Components","datePublished":"2024-02-07T09:07:21+00:00","dateModified":"2024-02-07T09:07:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-signal-inputs\/"},"wordCount":769,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-signal-inputs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.png","articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-signal-inputs\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-signal-inputs\/","name":"Angular Signal Inputs: road to Signal Components - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-signal-inputs\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-signal-inputs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/02\/Angular-open-source-min.png","datePublished":"2024-02-07T09:07:21+00:00","dateModified":"2024-02-07T09:07:23+00:00","description":"Angular v17.1.0 has been released recently and it introduced a new amazing\u00a0input\u00a0api designed to enable early access to\u00a0Signal Inputs.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-signal-inputs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/angular-signal-inputs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-signal-inputs\/#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\/frontend\/angular-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\/frontend\/"},{"@type":"ListItem","position":3,"name":"Angular Signal Inputs: road to 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\/wp-content\/uploads\/2026\/05\/Immagine-profilo-GDE-430kb-100x100.png","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/05\/Immagine-profilo-GDE-430kb-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/05\/Immagine-profilo-GDE-430kb-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":"Signal Inputs introduction is the initial act of the upcoming rise of Signal Components and zoneless Angular applications, enhancing already both code quality and developer experience. Let\u2019s delve into how they work. \u26a0\ufe0f ALERT: new Signal Inputs are still in developer preview \u26a0\ufe0f Bye @Input( ) decorator; Welcome input( ) function Creating a Signal Input is quite simple:rather than creating an input using the @Input( ) decorator, you……","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/25705","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=25705"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/25705\/revisions"}],"predecessor-version":[{"id":25801,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/25705\/revisions\/25801"}],"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=25705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=25705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=25705"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=25705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}