{"id":2964,"date":"2024-06-28T08:28:13","date_gmt":"2024-06-28T06:28:13","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=2964"},"modified":"2026-04-09T09:18:48","modified_gmt":"2026-04-09T07:18:48","slug":"what-advantages-have-angular-signal-inputs","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/","title":{"rendered":"Angular Signals Part 3 &#8211; What are the advantages of Signal Inputs?"},"content":{"rendered":"<p><strong><em>Klicke\u00a0<a href=\"https:\/\/www.thecodecampus.de\/blog\/welche-vorteile-haben-angular-signal-inputs\/\">hier<\/a>\u00a0f\u00fcr die deutsche Version des Blog-Posts.<\/em><\/strong><\/p>\n<h2>Increase the reactivity of your application with the Signal Inputs from Angular 17<\/h2>\n<p>In the first two articles in this series, <a href=\"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/\">Angular Signals Part 1 &#8211; How-to Guide on Angular Signals<\/a> and <a href=\"https:\/\/www.thecodecampus.de\/blog\/how-to-combine-angular-signals-and-rxjs\/\">Angular Signals Part 2 &#8211; How to combine Angular Signals and RxJS<\/a>, we explained what Angular Signals are and how they can be combined with RxJS. Building on this knowledge, this time we want to take a closer look at the <strong>signal inputs<\/strong> introduced with Angular version 17 and find out what advantages they offer us in reactive programming. Signal Inputs are a reactive alternative to the traditional <code>@Input()<\/code> decorators and are intended to simplify the exchange of data between child and parent components. This blog article uses an example to compare the classic <code>@Input()<\/code> decorator with the new declarative approach of signal inputs and discusses the advantages of signal inputs.<\/p>\n<p>If you want to learn more about Signal Inputs and Angular in detail, visit one of our Angular courses:<\/p>\n<ul>\n<li>Angular Basic Training: <a href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular\">https:\/\/www.thecodecampus.de\/schulungen\/angular<\/a><\/li>\n<li>Advanced Training: <a href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular-advanced\">https:\/\/www.thecodecampus.de\/schulungen\/angular-advanced<\/a><\/li>\n<\/ul>\n<h2>Classic @Input() decorator<\/h2>\n<p>Before we talk about signal inputs, let&#8217;s take a look at the <code>@Input()<\/code> decorator. The <code>@Input<\/code> decorator in Angular enables the transfer of data from a parent component to a child component. It is used in the child component to mark a property as input, the data is then provided by the parent component through property binding. This is a fundamental part of reusable components and scalable Angular applications, ensuring a clear separation of responsibilities and easy communication between components. More information on the <code>@Input()<\/code> decorator can be found in the official Angular <a href=\"https:\/\/angular.dev\/guide\/components\/inputs\">documentation<\/a>. We would like to take a closer look at this using our already familiar example of even and odd numbers. The parent component passes an incrementable number to the child component as soon as it changes. The child component then checks whether the number is even or odd.<\/p>\n<p><strong>Parent-Component (main.ts)<\/strong><\/p>\n<pre class=\"lang:ts decode:true\" title=\"main.ts\">...\r\n@Component({\r\n  ...\r\n  template: `\r\n    &lt;button (click)=\"increment()\"&gt;Increment&lt;\/button&gt;\r\n    &lt;tcc-input-with-decorator [number]=\"currentNumber\"&gt;&lt;\/tcc-input-with-decorator&gt;\r\n`\r\n})\r\nexport class AppComponent{\r\n  currentNumber:number = 0;\r\n  increment() {\r\n    this.currentNumber++;\r\n  }\r\n}\r\n...<\/pre>\n<p>The parent component <code>AppComponent<\/code> has the member variable <code>currentNumber<\/code>, which is incremented by the <code>increment()<\/code> method. This method is triggered by clicking the button in the template. The variable is transferred to the child component <code>InputWithDecoratorComponent<\/code> using property binding.<\/p>\n<p><strong>Child-Component (input-with-decorator.component.ts)<\/strong><\/p>\n<pre class=\"lang:default decode:true\" title=\"input-with-decorator.component.ts\">...\r\n@Component({\r\n  selector: 'tcc-input-with-decorator',\r\n  template: `&lt;p&gt;{{ number }} is {{ isEven ? 'Even' : 'Odd' }}&lt;\/p&gt;`,\r\n  ...\r\n})\r\nexport class InputWithDecoratorComponent implements OnChanges {\r\n  @Input() number: number | undefined;\r\n  isEven: boolean | undefined;\r\n\r\n  ngOnChanges(changes: SimpleChanges) {\r\n    if (changes['number']) {\r\n      this.isEven = changes['number'].currentValue % 2 === 0;\r\n      console.log('Even? ',this.isEven);\r\n    }\r\n  }\r\n}\r\n<\/pre>\n<p>The child component <code>InputWithDecoratorComponent<\/code> receives a number from the parent component via the <code>@Input()<\/code> decorator. The calculation of whether this number is an even or odd number is checked in the lifecycle method <code>ngOnChanges()<\/code>. This method is called automatically when the input value of our <code>@Input()<\/code> decorator changes. The template then displays whether it is an even or odd number.<\/p>\n<h2>Signal Inputs with input()<\/h2>\n<p><a href=\"https:\/\/angular.dev\/guide\/signals\/inputs\">Signal Inputs<\/a> are a reactive alternative to the traditional <code>@Input()<\/code> decorators and are intended to simplify data exchange between child and parent components. They are suitable for both components and directives. The initialisation\/declaration is very simple:<\/p>\n<pre class=\"lang:default decode:true \">number = input(0);       \/\/ InputSignal&lt;number&gt;\r\nname = input&lt;string&gt;();  \/\/ InputSignal&lt;string|undefined&gt;<\/pre>\n<p>As with the variable <code>number<\/code>, the input can be initialised with a value. Otherwise, as with the <code>name<\/code> variable, undefined is automatically used. These signal inputs are optional inputs. The required inputs are dealt with in the <a href=\"#optionen\">Options<\/a> section.<\/p>\n<p>The <code>InputSignal&lt;T&gt;<\/code>\u00a0class extends the <code>Signal&lt;T&gt;<\/code> class and can therefore be used within the signal context. This allows us to access the <code>effect()<\/code> and <code>computed()<\/code> methods.<\/p>\n<pre class=\"lang:js decode:true\" title=\"InputSignal&lt;T&gt;\"> export class InputSignal&lt;T&gt; extends Signal&lt;T&gt; { ... }<\/pre>\n<h2>Replace @Input() with Signal Input<\/h2>\n<p>Now let&#8217;s demonstrate the previous example using signal inputs. First, let&#8217;s look at the parent component again. Fortunately, only the selector of the component needs to be adapted. As before, the values can be transferred to the child component via property binding in the template.<\/p>\n<p><strong>Parent-Component (app.component.ts)<\/strong><\/p>\n<pre class=\"lang:default mark:6 decode:true\" title=\"app.component.ts\">...\r\n@Component({\r\n  ...\r\n  template: `\r\n    ...\r\n    &lt;tcc-signal-input [number]=\"currentNumber\"&gt;&lt;\/tcc-signal-input&gt;`,\r\n})\r\nexport class AppComponent{\r\n  ...\r\n}\r\n<\/pre>\n<h3>computed() instead of ngOnChanges()<\/h3>\n<p>There are a few more changes to the child component:<br \/>\nThe member variable <code>number<\/code> has been converted to a signal input. Instead of reacting to changes through the <code>ngOnChanges()<\/code> lifecycle method, we use the <code>computed()<\/code> function. The <code>computed()<\/code> function is not exclusive to signal inputs but, as mentioned before, can be used for any type of signal. In our previous articles, we described that this is a readonly signal that derives its value from other signals. The function is executed as soon as a signal within the callback function changes. In our case, when <code>number<\/code> is incremented by the parent component.<br \/>\nIt is important to note that the value of a signal (input) is always accessed with a function call <code>()<\/code>, otherwise an error is thrown.<\/p>\n<p><strong>Child-Component (signal-input.component.ts)<\/strong><\/p>\n<pre class=\"lang:default decode:true \" title=\"child-signal-input.ts\">...\r\n@Component({\r\n  ...\r\n  selector: 'tcc-signal-input',\r\n  template: `&lt;p&gt;{{ number() }} is {{ isEven() ? 'Even' : 'Odd' }}&lt;\/p&gt;`,\r\n})\r\nexport class SignalInputComponent {\r\n  number = input&lt;number&gt;(0);\r\n\r\n  isEven = computed(() =&gt; this.number() % 2 === 0);\r\n\r\n  sideEffect = effect(() =&gt; {\r\n  console.log('Even? ', this.isEven());\r\n  });\r\n\r\n}<\/pre>\n<p>The <code>effect()<\/code> function allows us to specify which actions should be executed when the value of a signal changes or which side effects should occur. In our example, we use a simple <code>console.log()<\/code> statement that is executed when the <code>isEven()<\/code> signal changes. This function can be particularly useful in structure directives, for example, to adjust or extend the behavior of DOM elements in Angular based on conditions or events. This allows DOM elements to be added or removed as required.<\/p>\n<h2 id=\"optionen\">Options for Signal Inputs<\/h2>\n<p>Signal Inputs have the same options as <code>@Input()<\/code>. We will now look at how you can use these options with signal inputs.<\/p>\n<h3>required<\/h3>\n<p>To mark a signal input as required, we can use <a href=\"https:\/\/angular.dev\/guide\/signals\/inputs\">required<\/a>:<\/p>\n<pre class=\"lang:default decode:true\" title=\"Option: required\">number = input.required&lt;number&gt;();<\/pre>\n<p>Without this option, the input is optional and does not have to be passed by the parent component. If the signal input is required, we receive an error if we do not enter a value in the parent component.<\/p>\n<h3>alias<\/h3>\n<p>We can also define an <a href=\"https:\/\/angular.dev\/guide\/signals\/inputs#aliasing-an-input\">alias<\/a> for our signal input:<\/p>\n<pre class=\"lang:default decode:true\" title=\"Option: alias\">number = input&lt;number&gt;({alias:\"counter\");<\/pre>\n<p>Now we can transfer our data using property binding with the <code>counter<\/code> property:<\/p>\n<pre class=\"lang:default decode:true\" title=\"Counter Property\">&lt;tcc-signal-input [counter]=\"currentNumber\"&gt;&lt;\/tcc-signal-input&gt;`,\r\n<\/pre>\n<h3>transform()<\/h3>\n<p>The <a href=\"https:\/\/angular.dev\/guide\/signals\/inputs#value-transforms\">transform()<\/a> function can be used to transform the value of the input property before it is output via the Signal Input. In the following example, the input value is multiplied by 2 before it is output via the Signal Input:<\/p>\n<pre class=\"lang:js decode:true\" title=\"Option: transform\"> number = input(0, {\r\n    transform: (value: number): number =&gt; {\r\n      return value * 2;\r\n    }\r\n  });<\/pre>\n<h2>So what are the advantages of signal inputs?<\/h2>\n<p>Signal inputs offer a direct and reactive alternative to <code>@Input()<\/code> and therefore numerous advantages. The main advantage is especially noticeable when components have already been developed in a reactive style with Signals. With Signal Inputs, we can now also use inputs that are Signals. This allows us to take full advantage of the functionality of Signals by using <code>computed()<\/code> and <code>effect()<\/code> to react to value changes instead of using <code>ngOnChanges<\/code> or setter, for example. Another advantage of Signal Inputs, which we did not explicitly address in the above example, is that they automatically mark OnPush components as dirty, which allows for more efficient UI updates. In addition, Signal Inputs offer the same options as <code>@Input()<\/code>, including the ability to mark inputs as <code>required<\/code>, use <code>alias<\/code> and apply <code>transform<\/code>. The usual usage options are therefore retained.<\/p>\n<h2>Experience is the best teacher: Hands-on with Signal Inputs<\/h2>\n<p>Are you ready to put theory into practice? In this interactive StackBlitz example, you will find the presented sample application, which takes up the basic concepts of Signal Inputs and includes all the examples and functions described. Dive in and experiment to experience Signals and Signal Inputs in action!<\/p>\n<p><iframe height=\"400\" style=\"width: 100%;\" src=\"https:\/\/stackblitz.com\/edit\/stackblitz-starters-gcugmg?embed=1&amp;file=src%2Fmain.ts\" scrolling=\"no\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<h2>What happens next<\/h2>\n<p>Our journey with Angular Signals is not over yet. In the <a href=\"https:\/\/www.thecodecampus.de\/blog\/migrate-easily-to-angular-signals\/\">next article<\/a> in this series, we want to introduce you to ngxtension and two extensions that have helped us a lot in the migration from <code>@Input<\/code> to Signal Inputs and <code>@Output<\/code> and with which we were able to migrate to the new signal-based paradigm in an efficient and structured way.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the first two articles in this series, Angular Signals Part 1 &#8211; How-to Guide on Angular Signals and Angular Signals Part 2 &#8211; How to combine Angular Signals and RxJS, we explained what Angular Signals are and how they can be combined with RxJS. Building on this knowledge, this time we want to take a closer look at the signal inputs introduced with Angular version 17 and find out what advantages they offer us in reactive programming. Signal Inputs are a reactive alternative to [&#8230;]<\/p>\n","protected":false},"author":39,"featured_media":3122,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,164,163,168,169,151,162],"tags":[112,170,172,179,171,175],"class_list":["post-2964","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-17","category-angular-performance-optimization","category-angular-signals","category-change-detection","category-optimization","category-performance","tag-angular","tag-angular-17","tag-angular-change-detection","tag-angular-signal-inputs","tag-angular-signals","tag-reactive-programming"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What are the advantages of Angular&#039;s Signal Inputs?<\/title>\n<meta name=\"description\" content=\"Angular 17: Develop more efficient apps with reactive components using Signal Inputs. Find out now what advantages Angular&#039;s Signal Inputs have!\" \/>\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.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What are the advantages of Angular&#039;s Signal Inputs?\" \/>\n<meta property=\"og:description\" content=\"Angular 17: Develop more efficient apps with reactive components using Signal Inputs. Find out now what advantages Angular&#039;s Signal Inputs have!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-28T06:28:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-09T07:18:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/Angular-signal-inputs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cornelius Rost\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cornelius Rost\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/\"},\"author\":{\"name\":\"Cornelius Rost\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/ab388f18048c8230505aa5012825ca69\"},\"headline\":\"Angular Signals Part 3 &#8211; What are the advantages of Signal Inputs?\",\"datePublished\":\"2024-06-28T06:28:13+00:00\",\"dateModified\":\"2026-04-09T07:18:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/\"},\"wordCount\":1189,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Angular-signal-inputs.png\",\"keywords\":[\"Angular\",\"Angular 17\",\"Angular Change Detection\",\"Angular Signal Inputs\",\"Angular Signals\",\"Reactive Programming\"],\"articleSection\":[\"Angular\",\"Angular 17\",\"Angular Performance Optimization\",\"Angular Signals\",\"Change Detection\",\"Optimization\",\"Performance\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/\",\"name\":\"What are the advantages of Angular's Signal Inputs?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Angular-signal-inputs.png\",\"datePublished\":\"2024-06-28T06:28:13+00:00\",\"dateModified\":\"2026-04-09T07:18:48+00:00\",\"description\":\"Angular 17: Develop more efficient apps with reactive components using Signal Inputs. Find out now what advantages Angular's Signal Inputs have!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Angular-signal-inputs.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Angular-signal-inputs.png\",\"width\":1200,\"height\":1200,\"caption\":\"Angular Part 3 - Signal Inputs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/what-advantages-have-angular-signal-inputs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Signals Part 3 &#8211; What are the advantages of Signal Inputs?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/ab388f18048c8230505aa5012825ca69\",\"name\":\"Cornelius Rost\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/cropped-cornelius-rost-tcc-author-96x96.png\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/cropped-cornelius-rost-tcc-author-96x96.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/cropped-cornelius-rost-tcc-author-96x96.png\",\"caption\":\"Cornelius Rost\"},\"description\":\"I am Cornelius, a working student in web development at W11K, where I work on web projects and develop practical solutions. I am currently studying for a Master's degree at the University of Stuttgart and am deepening my knowledge of software engineering.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/cornelius-rost-1b81a22ab\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/crost\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What are the advantages of Angular's Signal Inputs?","description":"Angular 17: Develop more efficient apps with reactive components using Signal Inputs. Find out now what advantages Angular's Signal Inputs have!","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.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/","og_locale":"en_US","og_type":"article","og_title":"What are the advantages of Angular's Signal Inputs?","og_description":"Angular 17: Develop more efficient apps with reactive components using Signal Inputs. Find out now what advantages Angular's Signal Inputs have!","og_url":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2024-06-28T06:28:13+00:00","article_modified_time":"2026-04-09T07:18:48+00:00","og_image":[{"width":1200,"height":1200,"url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/Angular-signal-inputs.png","type":"image\/png"}],"author":"Cornelius Rost","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cornelius Rost","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/"},"author":{"name":"Cornelius Rost","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/ab388f18048c8230505aa5012825ca69"},"headline":"Angular Signals Part 3 &#8211; What are the advantages of Signal Inputs?","datePublished":"2024-06-28T06:28:13+00:00","dateModified":"2026-04-09T07:18:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/"},"wordCount":1189,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/Angular-signal-inputs.png","keywords":["Angular","Angular 17","Angular Change Detection","Angular Signal Inputs","Angular Signals","Reactive Programming"],"articleSection":["Angular","Angular 17","Angular Performance Optimization","Angular Signals","Change Detection","Optimization","Performance"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/","url":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/","name":"What are the advantages of Angular's Signal Inputs?","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/Angular-signal-inputs.png","datePublished":"2024-06-28T06:28:13+00:00","dateModified":"2026-04-09T07:18:48+00:00","description":"Angular 17: Develop more efficient apps with reactive components using Signal Inputs. Find out now what advantages Angular's Signal Inputs have!","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/Angular-signal-inputs.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/Angular-signal-inputs.png","width":1200,"height":1200,"caption":"Angular Part 3 - Signal Inputs"},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Signals Part 3 &#8211; What are the advantages of Signal Inputs?"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/ab388f18048c8230505aa5012825ca69","name":"Cornelius Rost","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/10\/cropped-cornelius-rost-tcc-author-96x96.png","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/10\/cropped-cornelius-rost-tcc-author-96x96.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/10\/cropped-cornelius-rost-tcc-author-96x96.png","caption":"Cornelius Rost"},"description":"I am Cornelius, a working student in web development at W11K, where I work on web projects and develop practical solutions. I am currently studying for a Master's degree at the University of Stuttgart and am deepening my knowledge of software engineering.","sameAs":["https:\/\/www.linkedin.com\/in\/cornelius-rost-1b81a22ab"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/crost\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/2964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=2964"}],"version-history":[{"count":15,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/2964\/revisions"}],"predecessor-version":[{"id":3092,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/2964\/revisions\/3092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media\/3122"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=2964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=2964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=2964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}