{"id":3148,"date":"2025-02-07T09:21:12","date_gmt":"2025-02-07T08:21:12","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=3148"},"modified":"2025-04-22T10:55:29","modified_gmt":"2025-04-22T08:55:29","slug":"work-better-with-signals-directives","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/","title":{"rendered":"Angular Signals Part 5 &#8211; Step by step to Signal Directives"},"content":{"rendered":"<p><strong><em>Klicke\u00a0<a href=\"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-directives\/\">hier<\/a>\u00a0f\u00fcr die deutsche Version des Blog-Posts.<\/em><\/strong><\/p>\n<h2>Angular 17: Work better and faster with Signal Directives<\/h2>\n<p>Angular distinguishes between component, structure and attribute directives. In this article, we will focus on structure directives and show you step by step how you can work with Signal Directives more easily and effectively. For a quick refresher on Angular Signals, how they work and their benefits, check out the other articles in our Angular Signals series:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.thecodecampus.de\/blog\/angular-signals-part-1\/\">Angular Signals Part 1 \u2013 How-to Guide on Angular Signals<\/a><\/li>\n<li><a href=\"https:\/\/www.thecodecampus.de\/blog\/how-to-combine-angular-signals-and-rxjs\/\">Angular Signals Part 2 \u2013 How to combine Angular Signals and RxJS<\/a><\/li>\n<li><a href=\"https:\/\/www.thecodecampus.de\/blog\/what-advantages-have-angular-signal-inputs\/\">Angular Signals Part 3 \u2013 What are the advantages of Signal Inputs<\/a><\/li>\n<li><a href=\"https:\/\/www.thecodecampus.de\/blog\/migrate-easily-to-angular-signals\/\">Angular Signals Part 4 &#8211; Migrate easily to Signals<\/a><\/li>\n<\/ul>\n<p>As a starting point for the article, we have the <code>UserRoleRequired<\/code> directive, which is used to control access to certain areas of an Angular application based on user roles. This makes it possible to implement granular access control and ensure that only authorized users can access sensitive or restricted content.<\/p>\n<p>First, let&#8217;s take a look at the directive itself and introduce the traditional and already known approach. Then we will convert the code piece by piece to the approach with input signals.<br \/>\nIn the first step, we use <code>inject()<\/code> instead of the traditional constructor. In the second step, we use the input function, which replaces the <code>@Input<\/code> Decorator and lifecycle hook <code>ngOnChanges()<\/code>. In the third step, we convert observables to signals with <code>toSignal()<\/code> so that we don&#8217;t have to worry about a subscription manually. Last but not least, we combine the signals with <code>effect()<\/code>.<\/p>\n<p>You can follow the individual steps and intermediate results <a href=\"https:\/\/stackblitz.com\/edit\/stackblitz-starters-ktjsfc?file=src%2Fmain.ts\">here<\/a> in StackBlitz or try them out yourself.<\/p>\n<h2>UserRoleRequired directive: Traditional approach<\/h2>\n<p>In the traditional approach of a structure directive in Angular, we usually use a classic mechanism to retrieve user data and react to changes. In our case, we have a directive that checks whether the user has the required role to display certain content. The data from the input and an observable are then combined.<\/p>\n<pre class=\"lang:default decode:true\">import {\r\n  Directive,\r\n  Input,\r\n  OnChanges,\r\n  OnDestroy,\r\n  TemplateRef,\r\n  ViewContainerRef,\r\n} from '@angular\/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { LoginService } from '..\/login\/login-service';\r\n\r\n@Directive({\r\n  selector: '[tccUserRoleRequired]',\r\n  standalone: true,\r\n})\r\nexport class UserRoleRequiredDirective implements OnChanges, OnDestroy {\r\n  @Input('tccUserRoleRequired') userRole: string | undefined;\r\n  subscription: Subscription | undefined;\r\n\r\n  constructor(\r\n    private templateRef: TemplateRef&lt;any&gt;,\r\n    private viewContainer: ViewContainerRef,\r\n    private service: LoginService\r\n  ) {}\r\n\r\n  ngOnChanges(): void {\r\n    if (this.subscription) {\r\n      this.subscription.unsubscribe();\r\n    }\r\n\r\n    if (this.userRole) {\r\n      this.subscription = this.service.getUser().subscribe((user) =&gt; {\r\n        if (user &amp;&amp; user.role === this.userRole) {\r\n          this.viewContainer.createEmbeddedView(this.templateRef);\r\n        } else {\r\n          this.clear();\r\n        }\r\n      });\r\n    } else {\r\n      this.clear();\r\n    }\r\n  }\r\n\r\n  clear(): void {\r\n    this.viewContainer.clear();\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    if (this.subscription) {\r\n      this.subscription.unsubscribe();\r\n    }\r\n  }\r\n}\r\n<\/pre>\n<p>The output code is based on the classic <code>ngOnChanges()<\/code> lifecycle hook to respond to changes in the input values and take appropriate actions. Subscribing to observables that monitor the user status and manual cleanup with <code>ngOnDestroy()<\/code> is also typical of this approach.<\/p>\n<p>Signals offer a better way to work with reactive data without the need for manual management of subscriptions or complex lifecycle methods. They also enable a more direct and responsive way of binding data.<br class=\"yoast-text-mark\" \/>In the next steps, we will adapt the directive so that we can use signals to simplify the code and improve maintainability. This will also make the code much clearer.<\/p>\n<h2>Step 1: Use of inject()<\/h2>\n<p>In Angular, <code>inject()<\/code> is a function that allows you to inject dependencies directly into a class without using the traditional constructor mechanism. It provides a more elegant and flexible way to manage dependencies without overloading the constructor with many parameters. Instead of passing the dependencies via the constructor, which can quickly make the code confusing, <code>inject()<\/code> creates a clean separation between the logic and the dependencies. Like this we declare each dependency directly at the point where we need it.<\/p>\n<p>You can also find more information in the <a href=\"https:\/\/angular.dev\/api\/core\/inject\">Angular inject() documentation<\/a>.<\/p>\n<p>In the traditional approach, we have structured the code in such a way that we inject the <code>LoginService<\/code> via the constructor of the directive. But this quickly becomes confusing if there are many dependencies. The constructor has to receive and manage all the required services, which leads to greater complexity.<\/p>\n<pre class=\"lang:default decode:true\">constructor(\r\n  templateRef: TemplateRef&lt;any&gt;,\r\n  viewContainer: ViewContainerRef,\r\n  service: LoginService\r\n) {}<\/pre>\n<p>In the new approach, we use <code>inject()<\/code> to get the dependencies directly into the class. This leads to a clearer separation of the logic and the required services. In the case of our directive, the <code>LoginService<\/code> is now made available directly with the <code>inject()<\/code> function, without having to be passed via the constructor.<\/p>\n<pre class=\"lang:default decode:true\">templateRef: TemplateRef&lt;any&gt; = inject(TemplateRef);\r\nviewContainer: ViewContainerRef = inject(ViewContainerRef);\r\nservice: LoginService = inject(LoginService);<\/pre>\n<p>You can find more examples of how to change the constructor to inject() and why you should use inject() <a href=\"https:\/\/medium.com\/netanelbasal\/angular-di-using-inject-instead-of-constructor-d0782d434fb1\">here<\/a>.<\/p>\n<p><a href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular\" style=\"display: inline-block;\">\n<picture><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_frieder_WP_big.png\" media=\"(min-width: 1024px)\"><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_frieder_WP_medium.png\" media=\"(min-width: 600px)\"><img decoding=\"async\" src=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_frieder_WP_small.png\" alt=\"Angular Schulungen\" class=\"alignnone size-full wp-image-38\">\n<\/picture>\n<\/a><\/p>\n<h2>Step 2: Use of the Input-function instead of @Input and ngOnChanges<\/h2>\n<p>In Angular, we have traditionally used the <code>@Input<\/code> decorators and the <code>ngOnChanges()<\/code> lifecycle hook to pass input values from the outside into a component or directive and react to them. This approach works well, but is greatly simplified and improved with the introduction of Signals and the <code>Input<\/code> function.<\/p>\n<p>In the classic approach, an input is defined in a directive with the <code>@Input<\/code> decorator, and changes are processed via the <code>ngOnChanges()<\/code> hook. In our case, the <code>@Input<\/code> decorator is used to declare the <code>requiredUserRole<\/code>, and any change to this value is processed in the <code>ngOnChanges()<\/code> hook.<\/p>\n<pre class=\"lang:default decode:true\">@Input('tccUserRoleRequired') userRole: string | undefined;\r\nsubscription: Subscription | undefined;\r\n\r\nngOnChanges(): void {\r\n  if (this.subscription) {\r\n    this.subscription.unsubscribe();\r\n  }\r\n\r\n  if (this.userRole) {\r\n    this.subscription = this.service.getUser().subscribe((user) =&gt; {\r\n      if (user &amp;&amp; user.role === this.userRole) {\r\n        this.viewContainer.createEmbeddedView(this.templateRef);\r\n      } else {\r\n        this.clear();\r\n      }\r\n    });\r\n  } else {\r\n    this.clear();\r\n  }\r\n}<\/pre>\n<p>The code above is changed by using <code>input<\/code> and signals in such a way that a large part of the function is omitted, making the code much clearer.<\/p>\n<pre class=\"lang:default decode:true\">requiredUserRole = Input&lt;Signal&lt;string | null&gt;&gt;({\r\n  initialValue: null,\r\n  opts: { alias: 'tccUserRoleRequired' },\r\n});<\/pre>\n<p>With the introduction of Signals, we can use the <code>input<\/code> function to declare input values directly without needing a separate lifecycle hook like <code>ngOnChanges()<\/code>. The <code>input<\/code> function makes the declaration of input values easier and the reactivity is automatically applied.<\/p>\n<p>You can read more about the <code>input<\/code> function in the <a href=\"https:\/\/angular.dev\/guide\/components\/inputs\">Angular documentation<\/a>.<\/p>\n<h2>Step 3: Conversion of the observable with toSignal()<\/h2>\n<p>Traditionally, we often work with observables to handle asynchronous data, such as user information retrieved from a backend service. A common method is to use <code>getUser()<\/code>, which returns an observable that must then be subscribed to in order to access the data. However, with the introduction of Signals in Angular, we can convert these Observables into Signals. Converting observables into signals means that we no longer have to worry about subscriptions ourselves.<\/p>\n<pre class=\"lang:default decode:true\">userRoleFromLogin: Signal&lt;User | null | undefined&gt; = toSignal(\r\n  this.service.getUser()\r\n);\r\n\r\nuserHasSufficientPermission = computed(\r\n  () =&gt;\r\n    this.userRole() &amp;&amp;\r\n    this.userRoleFromLogin()?.role === this.userRole()\r\n);<\/pre>\n<p><code>userRoleFromLogin<\/code> is converted from the <code>getUser()<\/code> observable into a signal using the <code>toSignal()<\/code> function. When the underlying observable changes we can ensures that the signal is automatically updated. This eliminates the need to manually subscribe streams or manage subscriptions. At the same time, the declarative and reactive handling of the data is retained. Instead of relying on manually subscribing and managing streams, we can now work directly with reactive signals.<\/p>\n<p>You can read more about the <code>toSignal()<\/code> function and how to replace observables in the <a href=\"https:\/\/angular.dev\/ecosystem\/rxjs-interop\">Angular documentation<\/a>. Or in the <a href=\"https:\/\/www.thecodecampus.de\/blog\/how-to-combine-angular-signals-and-rxjs\/\">second post<\/a> in our blog series.<\/p>\n<h2>Step 4: Combine Signals with effect<\/h2>\n<p>Another concept in the new approach is the combination of signals with the <code>effect()<\/code> function, which automatically reacts to signal changes and executes corresponding actions. This further improves reactivity and event handling compared to traditional methods.<\/p>\n<p>An <code>effect<\/code> is executed every time its signal dependencies change. During execution, it dynamically tracks which signals have been read and is only triggered again if these values change. As a result, the state of the application adapts efficiently and automatically. In addition, <code>effects<\/code> always run at least once and are executed asynchronously during change detection.<\/p>\n<p>You can find out more about <code>effect<\/code> in the <a href=\"https:\/\/angular.dev\/guide\/signals#effects\">Angular documentation<\/a>.<\/p>\n<pre class=\"lang:default decode:true\">render = effect(() =&gt; {\r\n  if (this.userHasSufficientPermission()) {\r\n    this.viewContainer.createEmbeddedView(this.templateRef);\r\n  } else {\r\n    this.viewContainer.clear();\r\n  }\r\n});<\/pre>\n<p>In our last step, <code>effect()<\/code> is used to automatically react to changes in the <code>userRole<\/code> and <code>userRoleFromLogin<\/code> signals. If <code>userHasSufficientPermission<\/code> is true, the view is created with <code>createEmbeddedView<\/code>. Otherwise, it is removed with <code>clear()<\/code>. We have thus summarized the entire reactivity mechanism in an <code>effect<\/code> block that adjusts the view for every relevant change.<\/p>\n<h2>UserRoleRequired directive: Signal approach<\/h2>\n<p>And that&#8217;s it! After these four simple steps, we have successfully changed the <code>UserRoleRequired<\/code> directive to Signals:<\/p>\n<pre class=\"lang:default decode:true\">import {\r\n  computed,\r\n  Directive,\r\n  effect,\r\n  EffectRef,\r\n  inject,\r\n  input,\r\n  Signal,\r\n  TemplateRef,\r\n  ViewContainerRef,\r\n} from '@angular\/core';\r\nimport { LoginService, User } from '..\/login\/login-service';\r\nimport { toSignal } from '@angular\/core\/rxjs-interop';\r\n\r\n@Directive({\r\n  selector: '[tccUserRoleRequired]',\r\n  standalone: true,\r\n})\r\nexport class UserRoleRequiredDirective {\r\n  templateRef: TemplateRef&lt;any&gt; = inject(TemplateRef);\r\n  viewContainerRef: ViewContainerRef = inject(ViewContainerRef);\r\n  service: LoginService = inject(LoginService);\r\n\r\n  requiredUserRole = input&lt;string | null&gt;(null, {\r\n    alias: 'tccUserRoleRequired',\r\n  });\r\n\r\n  userRoleFromLogin: Signal&lt;User | null | undefined&gt; = toSignal(\r\n    this.service.getUser()\r\n  );\r\n\r\n  userHasSufficientPermission = computed(\r\n    () =&gt;\r\n      this.requiredUserRole() &amp;&amp;\r\n      this.userRoleFromLogin()?.role === this.requiredUserRole()\r\n  );\r\n\r\n  render: EffectRef = effect(() =&gt; {\r\n    if (this.userHasSufficientPermission()) {\r\n      this.viewContainerRef.createEmbeddedView(this.templateRef);\r\n    } else {\r\n      this.viewContainerRef.clear();\r\n    }\r\n  });\r\n}\r\n<\/pre>\n<p>Here you can see the complete code again, which includes all the previous improvements. By using <code>inject()<\/code>, the <code>input()<\/code> function for the input values, the conversion of observables with <code>toSignal()<\/code> and the combination of signals with <code>effect<\/code>, we have significantly simplified the code and at the same time improved reactivity and maintainability.<\/p>\n<h2>Try it out for yourself: Hands-On with Signal Directives<\/h2>\n<p>In our interactive StackBlitz example, you can take another look at the individual steps and intermediate states in the code and try them out for yourself. Each step is a separate file so that the code remains clear here too.<\/p>\n<p><iframe height=\"400\" style=\"width: 100%;\" src=\"https:\/\/stackblitz.com\/edit\/stackblitz-starters-ktjsfc?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&#8217;s next?<\/h2>\n<p>With Angular v19, there was also news regarding Signals, which we naturally don&#8217;t want to withhold from you. So our blog series continues and in the <a href=\"https:\/\/www.thecodecampus.de\/blog\/what-are-linked-signals\/\">next article<\/a> we will introduce you to <code>linkedSignals<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular distinguishes between component, structure and attribute directives. In this article, we will focus on structure directives and show you step by step how you can work with Signal Directives more easily and effectively. For a quick refresher on Angular Signals [&#8230;]<\/p>\n","protected":false},"author":40,"featured_media":3273,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,164,163,168,169,151,162,167],"tags":[112,170,172,178,181,171,37,175],"class_list":["post-3148","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","category-signals","tag-angular","tag-angular-17","tag-angular-change-detection","tag-angular-input-signals","tag-angular-performance-optimization","tag-angular-signals","tag-performance","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>Angular Signals Part 5 - Step by step to Signal Directives<\/title>\n<meta name=\"description\" content=\"Angular 17: Work better with Signal Directives! Learn now step by step how to optimize your directives with signals.\" \/>\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\/work-better-with-signals-directives\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Signals Part 5 - Step by step to Signal Directives\" \/>\n<meta property=\"og:description\" content=\"Angular 17: Work better with Signal Directives! Learn now step by step how to optimize your directives with signals.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-07T08:21:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-22T08:55:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/03\/angular-signals-directives.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=\"Marc Dommr\u00f6se\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marc Dommr\u00f6se\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/\"},\"author\":{\"name\":\"Marc Dommr\u00f6se\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/be8c4fcd8229783d0e9442dad8764770\"},\"headline\":\"Angular Signals Part 5 &#8211; Step by step to Signal Directives\",\"datePublished\":\"2025-02-07T08:21:12+00:00\",\"dateModified\":\"2025-04-22T08:55:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/\"},\"wordCount\":1301,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/angular-signals-directives.png\",\"keywords\":[\"Angular\",\"Angular 17\",\"Angular Change Detection\",\"Angular Input Signals\",\"Angular Performance Optimization\",\"Angular Signals\",\"Performance\",\"Reactive Programming\"],\"articleSection\":[\"Angular\",\"Angular 17\",\"Angular Performance Optimization\",\"Angular Signals\",\"Change Detection\",\"Optimization\",\"Performance\",\"Signals\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/\",\"name\":\"Angular Signals Part 5 - Step by step to Signal Directives\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/angular-signals-directives.png\",\"datePublished\":\"2025-02-07T08:21:12+00:00\",\"dateModified\":\"2025-04-22T08:55:29+00:00\",\"description\":\"Angular 17: Work better with Signal Directives! Learn now step by step how to optimize your directives with signals.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/angular-signals-directives.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/angular-signals-directives.png\",\"width\":1200,\"height\":1200,\"caption\":\"Angular Signals Part 5 - Directives\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/work-better-with-signals-directives\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Signals Part 5 &#8211; Step by step to Signal Directives\"}]},{\"@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\\\/be8c4fcd8229783d0e9442dad8764770\",\"name\":\"Marc Dommr\u00f6se\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/cropped-marc-dommroese-tcc-author-96x96.png\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/cropped-marc-dommroese-tcc-author-96x96.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/cropped-marc-dommroese-tcc-author-96x96.png\",\"caption\":\"Marc Dommr\u00f6se\"},\"description\":\"My name is Marc. I'm currently studying Computer Science at university, with one of my favorite topics being frontend development.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/marc-dommr\u00f6se-372a88318\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/mdommroese\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Signals Part 5 - Step by step to Signal Directives","description":"Angular 17: Work better with Signal Directives! Learn now step by step how to optimize your directives with signals.","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\/work-better-with-signals-directives\/","og_locale":"en_US","og_type":"article","og_title":"Angular Signals Part 5 - Step by step to Signal Directives","og_description":"Angular 17: Work better with Signal Directives! Learn now step by step how to optimize your directives with signals.","og_url":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2025-02-07T08:21:12+00:00","article_modified_time":"2025-04-22T08:55:29+00:00","og_image":[{"width":1200,"height":1200,"url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/03\/angular-signals-directives.png","type":"image\/png"}],"author":"Marc Dommr\u00f6se","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marc Dommr\u00f6se","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/"},"author":{"name":"Marc Dommr\u00f6se","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/be8c4fcd8229783d0e9442dad8764770"},"headline":"Angular Signals Part 5 &#8211; Step by step to Signal Directives","datePublished":"2025-02-07T08:21:12+00:00","dateModified":"2025-04-22T08:55:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/"},"wordCount":1301,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/03\/angular-signals-directives.png","keywords":["Angular","Angular 17","Angular Change Detection","Angular Input Signals","Angular Performance Optimization","Angular Signals","Performance","Reactive Programming"],"articleSection":["Angular","Angular 17","Angular Performance Optimization","Angular Signals","Change Detection","Optimization","Performance","Signals"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/","url":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/","name":"Angular Signals Part 5 - Step by step to Signal Directives","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/03\/angular-signals-directives.png","datePublished":"2025-02-07T08:21:12+00:00","dateModified":"2025-04-22T08:55:29+00:00","description":"Angular 17: Work better with Signal Directives! Learn now step by step how to optimize your directives with signals.","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/03\/angular-signals-directives.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/03\/angular-signals-directives.png","width":1200,"height":1200,"caption":"Angular Signals Part 5 - Directives"},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Signals Part 5 &#8211; Step by step to Signal Directives"}]},{"@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\/be8c4fcd8229783d0e9442dad8764770","name":"Marc Dommr\u00f6se","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/09\/cropped-marc-dommroese-tcc-author-96x96.png","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/09\/cropped-marc-dommroese-tcc-author-96x96.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/09\/cropped-marc-dommroese-tcc-author-96x96.png","caption":"Marc Dommr\u00f6se"},"description":"My name is Marc. I'm currently studying Computer Science at university, with one of my favorite topics being frontend development.","sameAs":["https:\/\/www.linkedin.com\/in\/marc-dommr\u00f6se-372a88318\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/mdommroese\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3148","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\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=3148"}],"version-history":[{"count":13,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3148\/revisions"}],"predecessor-version":[{"id":3471,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3148\/revisions\/3471"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media\/3273"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=3148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=3148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=3148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}