{"id":2741,"date":"2024-02-05T10:34:31","date_gmt":"2024-02-05T09:34:31","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=2741"},"modified":"2024-06-26T11:17:25","modified_gmt":"2024-06-26T09:17:25","slug":"angular-signals-part-1","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/","title":{"rendered":"Angular Signals Part 1 &#8211; How-to guide on Angular Signals"},"content":{"rendered":"<p><strong><em>Klicke <a href=\"https:\/\/www.thecodecampus.de\/blog\/mit-angular-signals-effiziente-anwendungen-entwickeln\/\">hier<\/a> f\u00fcr die deutsche Version des Blog-Posts.<\/em><\/strong><\/p>\n<h2>Enhancing Performance in Angular 17 with Signals: A Smart Solution<\/h2>\n<div class=\"flex flex-grow flex-col max-w-full\">\n<div class=\"min-h-[20px] text-message flex flex-col items-start gap-3 whitespace-pre-wrap break-words [.text-message+&amp;]:mt-5 overflow-x-auto\" data-message-author-role=\"assistant\" data-message-id=\"48c9c688-9af3-45a8-8ad0-d6824b708dc6\">\n<div class=\"markdown prose w-full break-words dark:prose-invert light\">\n<p>In the evolution of Angular, the adoption of Signals introduces a simpler and more efficient approach to change detection, fundamentally enhancing application performance and reactivity. Signals were introduced in Angular Version 16 as a developer Preview. Angular 17 doubles down and delivers the feature in a stable version. Unlike the comprehensive scanning strategy employed by Zone.js, which checks the entire component tree for changes, Signals employ a more targeted method. They directly update only the components affected by state changes, significantly reducing unnecessary performance overhead.<\/p>\n<p>This shift not only streamlines Angular&#8217;s change detection mechanism but also aligns with a more intuitive model of reactivity, improving both the development experience and the framework&#8217;s responsiveness. Through Signals, Angular developers gain access to a more precise and efficient toolset for managing state changes, marking a significant step forward in the framework&#8217;s capability to handle dynamic and complex applications with ease.<\/p>\n<\/div>\n<p>In essence by offering a more efficient, targeted, and simplified model of reactivity, Signals enable Angular applications to achieve higher performance levels and provide developers with a more streamlined and effective toolset for building dynamic, responsive applications.<\/p>\n<p>If you want to learn all about Signals in Detail and find out about all the tipps and tricks, come to one of our Angular Courses:<\/p>\n<ul>\n<li>Basic Angular 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<\/div>\n<\/div>\n<h2>Which problem is solved by signals?<\/h2>\n<p>Angular&#8217;s Signals are engineered to elevate application runtime performance by replacing Zone.js. Traditionally, Zone.js played a crucial role in activating Change Detection and refreshing the UI whenever the application&#8217;s state changed. This method required scanning the entire component tree to identify relevant state changes, often leading to performance lags due to redundant checks on inactive components.<\/p>\n<p>The introduction of Signals renders the comprehensive component tree scans unnecessary. Now, only the components directly impacted by a change are updated, significantly streamlining the DOM update process. This focused strategy not only minimizes system overhead but also boosts the application&#8217;s overall efficiency.<\/p>\n<p>Beyond enhancing performance, Angular&#8217;s Signals also simplify state management, offering a more intuitive alternative to RxJS, especially when replacing Subject-based state. RxJS, with its powerful but complex set of tools for reactive programming, can be challenging for developers to master, especially when managing application state through Subjects. Subjects in RxJS, while flexible, require a deeper understanding of reactive programming concepts, such as observables and subscribers, making them less accessible for beginners or for simpler applications.<\/p>\n<p>In contrast, Signals provide a straightforward mechanism for state management. They eliminate the steep learning curve associated with RxJS by offering a simpler, more direct approach. Developers can define a state and directly link it to the UI components, bypassing the complexities of observable streams. This direct linkage simplifies the process of updating the UI in response to state changes, as there&#8217;s no need to manage subscriptions or handle streams of data. With Signals, state management becomes more about defining and reacting to state changes, rather than juggling the intricacies of reactive programming paradigms.<\/p>\n<p>&nbsp;<\/p>\n<h2>Signals aka Reactive Primitives<\/h2>\n<p>Signals, known as Reactive Primitives, are a system that tracks the use and dependencies of state within an application, enabling Angular to optimize rendering updates. With Signals, Angular precisely identifies where state is used and its dependencies. This allows for targeted re-rendering of components, reducing the need for exhaustive checks and eliminating the reliance on Change Detection. Unlike Observables, Signals don&#8217;t require subscriptions and always hold an initial value, simplifying state management by removing the need for asynchronous handling, such as the async pipe.<\/p>\n<p>Signals are thoroughly typed and can be of type Number or String or even complex types. They can be writeable or readonly and you can always create a readonly signal from any writeable signal with <code>.asReadonly()<\/code>. Readonly signals can also depend on writable signals but we will look at that later.<\/p>\n<p>It&#8217;s also very easy to export signals in order to use them in several components.<\/p>\n<pre class=\"\">export const name = signal('Angular');<\/pre>\n<pre class=\"\">import { name } from \"main\";<\/pre>\n<h2>How to interact with Signals<\/h2>\n<p>So now that we&#8217;ve established the benefits of Signals in tackling common challenges in Angular development, it&#8217;s time to delve deeper. Let&#8217;s explore how to utilize them effectively and examine the various methods of interaction available at our disposal.<\/p>\n<h3>signal()<\/h3>\n<p class=\"\">By calling the <code>signal<\/code> function you can create a writeable signal. In our case, a counter.<\/p>\n<pre class=\"\">const counter = signal(0);<\/pre>\n<p>We can access the value with the variable name and round brackets. This also works in the template if you use it in an expression.<\/p>\n<pre class=\"\">console.log('New counter value', this.counter());<\/pre>\n<pre class=\"\">Count: {{ counter() }}<\/pre>\n<h3>set()<\/h3>\n<p>With <code>set<\/code> you can give the signal a new value.<\/p>\n<pre class=\"\">this.counter.set(5);\r\n<\/pre>\n<p>We can use this to reset the counter to zero.<\/p>\n<pre class=\"\">reset() {\r\n  this.counter.set(0);\r\n};<\/pre>\n<h3>update()<\/h3>\n<p>By using <code>update<\/code> you can also change the value of the signal, but now you have access to the current value. So you can set a new value based on the old one.<br \/>\nIn our example we can use this for an increment or decrement function.<\/p>\n<pre class=\"lang:default decode:true\">increment() {\r\n  this.counter.update((currentValue) =&gt; currentValue + 1);\r\n};<\/pre>\n<p>The <code>update<\/code> function doesn&#8217;t have to be a one-liner. As long as you specify a return value, you can perform various operations.<\/p>\n<pre class=\"lang:default decode:true\">decrement() {\r\n  this.counter.update((currentValue) =&gt; {\r\n    console.log('Old value', currentValue);\r\n    const newValue = currentValue - 1;\r\n    return newValue; \r\n  });\r\n};<\/pre>\n<h3>computed()<\/h3>\n<p>To create a signal that is based on or dependent on another signal you can use <code>computed<\/code>. This function generates a readonly signal that updates itself if the value of the signal on which it depends changes.<br \/>\nAs an example we will make a variable that checks if the current counter is even or odd. <code>isOdd<\/code> cannot be changed through the <code>set<\/code> or <code>update<\/code> function. But since Angular knows <span style=\"font-weight: 400;\">that there is a dependency between the two signals,<\/span> every time the <code>counter<\/code> signal changes the callback function of <code>isOdd<\/code> is executed again.<\/p>\n<pre class=\"lang:default decode:true\">const isOdd = computed(() =&gt; this.counter() % 2 === 1);<\/pre>\n<p>Of course this also works with two or more signals to depend on. Now <code>combined<\/code> is updated every time either <code>firstLetter<\/code> or <code>secondLetter<\/code> changes.<\/p>\n<pre class=\"lang:default decode:true\">const firstLetter = signal('a')\r\nconst secondLetter = signal('b')\r\nconst combined = computed(() =&gt; this.firstLetter().concat(this.secondLetter()));<\/pre>\n<p>As with the <code>update<\/code> function <code>computed<\/code> doesn&#8217;t have to be one line. But be aware that the dependencies of a computed signal are not only determined by its return value. In the example below <code>combined<\/code> now only uses <code>firstLetter<\/code> in the return statement, but it&#8217;s still getting updated when the value of <code>secondLetter<\/code> changes since the signal is used in the callback function of <code>combined<\/code>.<\/p>\n<pre class=\"lang:default decode:true \">const combined = computed(() =&gt; {\r\n  console.log('Second letter changed', this.secondLetter());\r\n  return this.firstLetter().concat('c')\r\n});<\/pre>\n<h3>effect()<\/h3>\n<p>With <code>effect<\/code> you can declare what should happen if the value of a signal changes or in other words which side effects are triggered by this. That can be logging the value of a signal, exporting the value to localStorage or saving the value transparently to the database.<br \/>\nIn our case we just want to print the new counter value to the console.<\/p>\n<p>By default, registering a new effect with the <code>effect<\/code> function requires an injection context (access to the inject function). The easiest way to provide this is to call <code>effect<\/code> within a component, directive, or service constructor. Alternatively, the effect can be assigned to a variable (which also gives it a descriptive name).<\/p>\n<pre class=\"lang:default decode:true\">constructor() {\r\n  effect(() =&gt; {\r\n    console.log('New counter value', this.counter());\r\n  });\r\n}<\/pre>\n<p>Like the <code>computed<\/code> function an effect can have a dependency to multiple signals.<\/p>\n<pre class=\"lang:default decode:true\">const letterEffect = effect(() =&gt; console.log('Log letters', this.firstLetter(), this.secondLetter()));<\/pre>\n<h3>untracked()<\/h3>\n<p>If you want to read signals in a reactive function such as <code>computed<\/code> or <code>effect<\/code> without creating a dependency you can prevent a signal read from being tracked by calling it with the <code>untracked<\/code> function.<\/p>\n<p>Let&#8217;s take the <code>letterEffect<\/code> from above as an example. At the moment the effect logs the current letters when either one of the signal values changes. If the effect should only be triggered when the <code>firstLetter<\/code> changes, but not when the <code>secondLetter<\/code> changes we can write the following:<\/p>\n<pre class=\"lang:default decode:true \">const specialEffect = effect(() =&gt; console.log('Special effect', this.firstLetter(), untracked(this.secondLetter)));<\/pre>\n<h2>Experience is the Best Teacher: Hands-On with Signals<\/h2>\n<p>Ready to put theory into practice? In this interactive StackBlitz example, we&#8217;ve crafted a sample app that embodies the Signal concepts we discussed. Feel free to dive in and experiment to see Signals in action!<\/p>\n<p><iframe height=\"400\" style=\"width: 100%;\" src=\"https:\/\/stackblitz.com\/edit\/stackblitz-starters-m9kokr?embed=1&amp;file=src%2Fmain.ts\" scrolling=\"no\"><\/iframe><\/p>\n<h2>Use cases of Signals<\/h2>\n<p>Signals are well suited to manage a synchronous state in the components. They don&#8217;t for events and other asynchronous operations. Therefore signals are an extension to RxJS and not a replacement. They can be a substitution for async pipes and OnPush components as Angular notices by itself when something in the component changed.<\/p>\n<p>More about the usage of Signals and RxJS will be covered in <a href=\"https:\/\/www.thecodecampus.de\/blog\/how-to-combine-angular-signals-and-rxjs\/\">part two<\/a> of our angular signals article series.<\/p>\n<p>If you want to dive deeper into the what, why and how of Angular Signals we really recommend the<a href=\"https:\/\/www.youtube.com\/watch?v=oqYQG7QMdzw\"> Videos of Deborah Kurata<\/a>. She does an exceptional job in explaining the concepts behind the new reactive primitive.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the evolution of Angular, the adoption of Signals introduces a simpler and more efficient approach to change detection, fundamentally enhancing application performance and reactivity. Signals were introduced in Angular Version 16 as a developer Preview. Angular 17 [&#8230;]<\/p>\n","protected":false},"author":32,"featured_media":2763,"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,171,173,175,174,176],"class_list":["post-2741","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-signals","tag-reactive-primitive","tag-reactive-programming","tag-rxjs","tag-state-management"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to use angular signals<\/title>\n<meta name=\"description\" content=\"A quick guide on Angular Signals to show their purpose and how to use them and their functions to improve your Angular experience.\" \/>\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\/angular-signals-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use angular signals\" \/>\n<meta property=\"og:description\" content=\"A quick guide on Angular Signals to show their purpose and how to use them and their functions to improve your Angular experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-05T09:34:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-26T09:17:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/02\/angular_signals_part_I_thumbnail.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1052\" \/>\n\t<meta property=\"og:image:height\" content=\"542\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Anne Naumann\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anne Naumann\" \/>\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\\\/angular-signals-part-1\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signals-part-1\\\/\"},\"author\":{\"name\":\"Anne Naumann\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/d5533850d6a4d364e194500c24c0021a\"},\"headline\":\"Angular Signals Part 1 &#8211; How-to guide on Angular Signals\",\"datePublished\":\"2024-02-05T09:34:31+00:00\",\"dateModified\":\"2024-06-26T09:17:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signals-part-1\\\/\"},\"wordCount\":1402,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signals-part-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/angular_signals_part_I_thumbnail.jpg\",\"keywords\":[\"Angular\",\"Angular 17\",\"Angular Change Detection\",\"Angular Signals\",\"Reactive Primitive\",\"Reactive Programming\",\"RxJS\",\"State Management\"],\"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\\\/angular-signals-part-1\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signals-part-1\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signals-part-1\\\/\",\"name\":\"How to use angular signals\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signals-part-1\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signals-part-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/angular_signals_part_I_thumbnail.jpg\",\"datePublished\":\"2024-02-05T09:34:31+00:00\",\"dateModified\":\"2024-06-26T09:17:25+00:00\",\"description\":\"A quick guide on Angular Signals to show their purpose and how to use them and their functions to improve your Angular experience.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signals-part-1\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signals-part-1\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signals-part-1\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/angular_signals_part_I_thumbnail.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/angular_signals_part_I_thumbnail.jpg\",\"width\":1052,\"height\":542,\"caption\":\"Angular Signals I Thumbnail\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-signals-part-1\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Signals Part 1 &#8211; How-to guide on Angular Signals\"}]},{\"@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\\\/d5533850d6a4d364e194500c24c0021a\",\"name\":\"Anne Naumann\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/anne-naumann-tcc-author-96x96.webp\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/anne-naumann-tcc-author-96x96.webp\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/anne-naumann-tcc-author-96x96.webp\",\"caption\":\"Anne Naumann\"},\"description\":\"Hi, I'm a web developer with a focus on frontend technologies, especially Angular. I also have a lot of fun when it comes to UI\\\/UX and when I need to make room for new books on my bookshelves.\",\"sameAs\":[\"https:\\\/\\\/thecodecampus.de\\\/ueber-uns\\\/trainer\\\/anne-naumann\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/anne-naumann-1ab635307\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/anaumann\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use angular signals","description":"A quick guide on Angular Signals to show their purpose and how to use them and their functions to improve your Angular experience.","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\/angular-signals-part-1\/","og_locale":"en_US","og_type":"article","og_title":"How to use angular signals","og_description":"A quick guide on Angular Signals to show their purpose and how to use them and their functions to improve your Angular experience.","og_url":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2024-02-05T09:34:31+00:00","article_modified_time":"2024-06-26T09:17:25+00:00","og_image":[{"width":1052,"height":542,"url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/02\/angular_signals_part_I_thumbnail.jpg","type":"image\/jpeg"}],"author":"Anne Naumann","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Anne Naumann","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/"},"author":{"name":"Anne Naumann","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/d5533850d6a4d364e194500c24c0021a"},"headline":"Angular Signals Part 1 &#8211; How-to guide on Angular Signals","datePublished":"2024-02-05T09:34:31+00:00","dateModified":"2024-06-26T09:17:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/"},"wordCount":1402,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/02\/angular_signals_part_I_thumbnail.jpg","keywords":["Angular","Angular 17","Angular Change Detection","Angular Signals","Reactive Primitive","Reactive Programming","RxJS","State Management"],"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\/angular-signals-part-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/","url":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/","name":"How to use angular signals","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/02\/angular_signals_part_I_thumbnail.jpg","datePublished":"2024-02-05T09:34:31+00:00","dateModified":"2024-06-26T09:17:25+00:00","description":"A quick guide on Angular Signals to show their purpose and how to use them and their functions to improve your Angular experience.","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/02\/angular_signals_part_I_thumbnail.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/02\/angular_signals_part_I_thumbnail.jpg","width":1052,"height":542,"caption":"Angular Signals I Thumbnail"},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Signals Part 1 &#8211; How-to guide on Angular Signals"}]},{"@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\/d5533850d6a4d364e194500c24c0021a","name":"Anne Naumann","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/anne-naumann-tcc-author-96x96.webp","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/anne-naumann-tcc-author-96x96.webp","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/anne-naumann-tcc-author-96x96.webp","caption":"Anne Naumann"},"description":"Hi, I'm a web developer with a focus on frontend technologies, especially Angular. I also have a lot of fun when it comes to UI\/UX and when I need to make room for new books on my bookshelves.","sameAs":["https:\/\/thecodecampus.de\/ueber-uns\/trainer\/anne-naumann","https:\/\/www.linkedin.com\/in\/anne-naumann-1ab635307\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/anaumann\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/2741","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\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=2741"}],"version-history":[{"count":25,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/2741\/revisions"}],"predecessor-version":[{"id":2746,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/2741\/revisions\/2746"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media\/2763"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=2741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=2741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=2741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}