{"id":3007,"date":"2025-02-07T09:21:36","date_gmt":"2025-02-07T08:21:36","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=3007"},"modified":"2026-04-09T11:27:36","modified_gmt":"2026-04-09T09:27:36","slug":"arbeite-besser-mit-signal-directives","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-directives\/","title":{"rendered":"Angular Signals Teil 5 &#8211; Schritt f\u00fcr Schritt zu Signal Directives"},"content":{"rendered":"<p><strong><em>Click <a href=\"https:\/\/www.thecodecampus.de\/blog\/work-better-with-signals-directives\/\">here<\/a> for the English version of this blog post.<\/em><\/strong><\/p>\n<h2>Angular 17: Arbeite besser und schneller mit Signal Directives<\/h2>\n<p>Angular unterscheidet zwischen Komponenten-, Struktur- und Attribut-Direktiven. In diesem Beitrag werden wir uns auf Struktur-Direktiven konzentrieren und Dir Schritt f\u00fcr Schritt zeigen, wie Du mit Signal Directives einfacher und effektiver arbeiten kannst. F\u00fcr einen kurzen Refresh zu Angular Signals, ihrer Funktionsweise und ihren Vorteilen schau doch in die anderen Artikel unserer Angular Signals Reihe:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.thecodecampus.de\/blog\/mit-angular-signals-effiziente-anwendungen-entwickeln\/\">Angular Signals Teil 1 \u2013 How-to Guide f\u00fcr Angular Signals<\/a><\/li>\n<li><a href=\"https:\/\/www.thecodecampus.de\/blog\/wie-kombiniert-man-angular-signals-und-rxjs\/\">Angular Signals Teil 2 \u2013 Wie kombiniert man Angular Signals und RxJS<\/a><\/li>\n<li><a href=\"https:\/\/www.thecodecampus.de\/blog\/welche-vorteile-haben-angular-signal-inputs\/\">Angular Signals Teil 3 \u2013 Welche Vorteile haben Signal Inputs<\/a><\/li>\n<li><a href=\"https:\/\/www.thecodecampus.de\/blog\/ganz-einfach-zu-angular-signals-migrieren\/\">Angular Signals Teil 4 &#8211; Ganz einfach zu Signals migrieren<\/a><\/li>\n<\/ul>\n<p>Als Ausgangspunkt f\u00fcr den Artikel haben wir die <code>UserRoleRequired<\/code>-Direktive, welche dazu dient, den Zugriff auf bestimmte Bereiche einer Angular-Anwendung basierend auf Benutzerrollen zu steuern. Diese erm\u00f6glicht es, eine granulare Zugriffskontrolle zu implementieren und sicherzustellen, dass nur autorisierte Benutzer auf sensible oder eingeschr\u00e4nkte Inhalte zugreifen k\u00f6nnen.<\/p>\n<p>Zuerst wollen wir uns die Direktive an sich anschauen und den traditionellen und bereits bekannten Ansatz vorstellen. Danach bauen wir den Code St\u00fcck f\u00fcr St\u00fcck auf den Ansatz mit Input Signals um.<br \/>\nIm ersten Schritt nutzen wir <code>inject()<\/code> anstatt dem herk\u00f6mmlichen Konstruktor. Im zweiten Schritt wird die Input-Funktion genutzt, welche den <code>@Input<\/code> Decorator und Lifecycle-Hook <code>ngOnChanges()<\/code> ersetzt. Damit wir uns nicht manuell um eine Subscription k\u00fcmmern m\u00fcssen, wandeln wir im dritten Schritt Observables mit <code>toSignal()<\/code> zu Signals um. Zu guter Letzt kombinieren wir die Signals noch mit <code>effect()<\/code>.<\/p>\n<p>Die einzelnen Schritte und Zwischenst\u00e4nde kannst Du <a href=\"https:\/\/stackblitz.com\/edit\/stackblitz-starters-ktjsfc?file=src%2Fmain.ts\">hier<\/a> in StackBlitz nachverfolgen oder selber ausprobieren.<\/p>\n<h2>UserRoleRequired-Direktive: Traditioneller Ansatz<\/h2>\n<p>Im traditionellen Ansatz einer Struktur-Direktive in Angular verwenden wir in der Regel einen klassischen Mechanismus, um Benutzerdaten abzurufen und auf \u00c4nderungen zu reagieren. In unserem Fall haben wir eine Direktive, die \u00fcberpr\u00fcft, ob der Benutzer die erforderliche Rolle hat, um bestimmten Inhalt anzuzeigen. Es werden die Daten von einem Input und einem Observable kombiniert.<\/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>Der Ausgangscode basiert auf dem klassischen <code>ngOnChanges()<\/code>-Lifecycle-Hook, um auf \u00c4nderungen an den Eingabewerten zu reagieren und entsprechende Aktionen zu unternehmen. Das Subscriben an Observables, die den Benutzerstatus \u00fcberwachen, und das manuelle Aufr\u00e4umen mit <code>ngOnDestroy()<\/code> ist ebenfalls typisch f\u00fcr diesen Ansatz.<\/p>\n<p>Signals bieten eine bessere M\u00f6glichkeit, mit reaktiven Daten zu arbeiten, ohne die Notwendigkeit von manuellem Management von Subscriptions oder komplexen Lifecycle Methoden. Au\u00dferdem erm\u00f6glichen sie eine direktere und reaktionsschnellere Art der Datenbindung.<br \/>\nIn den n\u00e4chsten Schritten werden wir die Direktive so anpassen, dass wir Signals verwenden k\u00f6nnen, um den Code zu vereinfachen und die Wartbarkeit zu verbessern. Der Code wird dadurch auch deutlich \u00fcbersichtlicher werden.<\/p>\n<p><a style=\"display: inline-block;\" href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular\">\n<picture><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_sascha_WP_big.png\" media=\"(min-width: 1024px)\" \/><\/picture>\n<picture><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_sascha_WP_medium.png\" media=\"(min-width: 600px)\" \/><\/picture>\n<picture><img decoding=\"async\" class=\"alignnone size-full wp-image-38\" src=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_sascha_WP_small.png\" alt=\"Angular Schulungen\" \/><\/picture>\n<\/a><\/p>\n<h2>Schritt 1: Einsatz von inject()<\/h2>\n<p>In Angular ist <code>inject()<\/code> eine Funktion, die es erm\u00f6glicht, Abh\u00e4ngigkeiten direkt in eine Klasse zu injizieren, ohne den traditionellen Konstruktormechanismus zu verwenden. Es bietet eine elegantere und flexiblere M\u00f6glichkeit, Abh\u00e4ngigkeiten zu verwalten, ohne den Konstruktor mit vielen Parametern zu \u00fcberladen. Statt die Abh\u00e4ngigkeiten \u00fcber den Konstruktor zu \u00fcbergeben, was den Code schnell un\u00fcbersichtlich machen kann, wird mit <code>inject()<\/code> eine saubere Trennung zwischen der Logik und den Abh\u00e4ngigkeiten geschaffen. Jede Abh\u00e4ngigkeit wird direkt an der Stelle deklariert, wo sie gebraucht wird.<\/p>\n<p>Mehr Informationen findest Du auch in der Dokumentation zu <a href=\"https:\/\/angular.dev\/api\/core\/inject\">inject()<\/a> von Angular.<\/p>\n<p>Im traditionellen Ansatz haben wir den Code so aufgebaut, dass wir den <code>LoginService<\/code> \u00fcber den Konstruktor der Direktive injizieren. Dabei wird der Service im Konstruktor empfangen, was jedoch bei vielen Abh\u00e4ngigkeiten schnell un\u00fcbersichtlich wird. Der Konstruktor muss alle ben\u00f6tigten Dienste aufnehmen und verwalten, was zu einer h\u00f6heren Komplexit\u00e4t f\u00fchrt.<\/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>Im neuen Ansatz verwenden wir <code>inject()<\/code>, um die Abh\u00e4ngigkeiten direkt in die Klasse zu holen. Dies f\u00fchrt zu einer klareren Trennung der Logik und den ben\u00f6tigten Services. Im Fall unserer Direktive wird der <code>LoginService<\/code> nun direkt mit der <code>inject()<\/code>-Funktion zur Verf\u00fcgung gestellt, ohne dass er \u00fcber den Konstruktor \u00fcbergeben werden muss.<\/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>Weitere Beispiele zur Ab\u00e4nderung vom Konstruktor zu <code>inject()<\/code> und warum Du <code>inject()<\/code> verwenden solltest findest Du <a href=\"https:\/\/medium.com\/netanelbasal\/angular-di-using-inject-instead-of-constructor-d0782d434fb1\">hier<\/a>.<\/p>\n<h2>Schritt 2: Verwendung der Input-Funktion statt @Input und ngOnChanges<\/h2>\n<p>In Angular haben wir traditionell die <code>@Input<\/code>-Dekoratoren und den <code>ngOnChanges()<\/code>-Lifecycle-Hook verwendet, um Eingabewerte von au\u00dfen in eine Komponente oder Direktive zu reichen und darauf zu reagieren. Dieser Ansatz funktioniert gut, wird aber durch die Einf\u00fchrung von Signals und der <code>Input<\/code>-Funktion deutlich vereinfacht und verbessert.<\/p>\n<p>Im klassischen Ansatz wird eine Eingabe in einer Direktive mit dem <code>@Input<\/code>-Dekorator definiert, und \u00c4nderungen werden \u00fcber den <code>ngOnChanges()<\/code>-Hook verarbeitet. In unserem Fall wird der <code>@Input<\/code>-Dekorator verwendet, um die <code>requiredUserRole<\/code> zu deklarieren, und jede \u00c4nderung an diesem Wert wird im <code>ngOnChanges()<\/code>-Hook verarbeitet.<\/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>Der obige Code wird durch die Verwendung von <code>input()<\/code> und Signals so ver\u00e4ndert, dass ein Gro\u00dfteil der Funktion wegf\u00e4llt und der Code damit viel \u00fcbersichtlicher wird.<\/p>\n<pre class=\"lang:default decode:true\">requiredUserRole = input&lt;string | null&gt;(null, {\r\n  alias: 'tccUserRoleRequired',\r\n});<\/pre>\n<p>Mit der Einf\u00fchrung von Signals k\u00f6nnen wir die <code>input<\/code>-Funktion verwenden, um Eingabewerte direkt zu deklarieren, ohne einen separaten Lifecycle-Hook wie <code>ngOnChanges()<\/code> zu ben\u00f6tigen. Die <code>input<\/code>-Funktion macht die Deklaration von Eingabewerten einfacher und die Reaktivit\u00e4t wird automatisch \u00fcbernommen.<\/p>\n<p>Mehr zur <code>input<\/code>-Funktion kannst Du in der <a href=\"https:\/\/angular.dev\/guide\/components\/inputs\">Dokumentation von Angular<\/a> nachlesen.<\/p>\n<h2>Schritt 3: Umwandlung des Observable mit toSignal()<\/h2>\n<p>Im traditionellen Ansatz arbeiten wir oft mit Observables, um asynchrone Daten zu handhaben, wie zum Beispiel Benutzerinformationen, die von einem Backend-Dienst abgerufen werden. Eine h\u00e4ufige Methode ist die Verwendung von <code>getUser()<\/code>, die ein Observable zur\u00fcckgibt, an welches dann subscribed werden muss, um auf die Daten zuzugreifen. Mit der Einf\u00fchrung von Signals in Angular k\u00f6nnen wir diese Observables jedoch in Signals umwandeln. Die Umwandlung von Observables in Signals bedeutet, dass wir uns nicht mehr selbst um die Subscriptions k\u00fcmmern m\u00fcssen.<\/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.requiredUserRole() &amp;&amp;\r\n      this.userRoleFromLogin()?.role === this.requiredUserRole()\r\n);<\/pre>\n<p><code>userRoleFromLogin<\/code> wird hier aus dem Observable <code>getUser()<\/code>, mit Hilfe der <code>toSignal()<\/code>-Funktion, in ein Signal umgewandelt. Das sorgt daf\u00fcr, dass das Signal automatisch aktualisiert wird, wenn sich das zugrunde liegende Observable \u00e4ndert. Dadurch entf\u00e4llt die Notwendigkeit, manuell Streams zu subscriben oder Subscriptions zu verwalten. Gleichzeitig bleibt die deklarative und reaktive Handhabung der Daten bestehen. Anstatt auf das manuelle subscriben und Verwalten von Streams angewiesen zu sein, k\u00f6nnen wir nun direkt mit reaktiven Signals arbeiten.<\/p>\n<p>Mehr zur <code>toSignal()<\/code>-Funktion und wie man Observables ersetzen kann, kannst Du in der <a href=\"https:\/\/angular.dev\/ecosystem\/rxjs-interop\">Dokumentation von Angular<\/a> nachlesen. Oder auch im <a href=\"https:\/\/www.thecodecampus.de\/blog\/wie-kombiniert-man-angular-signals-und-rxjs\/\">zweiten Beitrag<\/a> unser Blogreihe.<\/p>\n<h2>Schritt 4: Signals mit effect kombinieren<\/h2>\n<p>Ein weiteres Konzept im neuen Ansatz ist die Kombination von Signals mit der <code>effect()<\/code>-Funktion, die automatisch auf Signal\u00e4nderungen reagiert und entsprechende Aktionen ausf\u00fchrt. Dies verbessert weiterhin die Reaktivit\u00e4t und das Event-Handling im Vergleich zu traditionellen Methoden.<\/p>\n<p>Ein <code>effect<\/code> wird bei jeder \u00c4nderung seiner Signal-Abh\u00e4ngigkeiten ausgef\u00fchrt. W\u00e4hrend der Ausf\u00fchrung verfolgt er dynamisch, welche Signals gelesen wurden, und wird nur bei \u00c4nderungen dieser Werte erneut ausgel\u00f6st. Dadurch passt sich der Zustand der Anwendung effizient und automatisch an. Zus\u00e4tzlich laufen <code>effects<\/code> immer mindestens einmal und werden asynchron w\u00e4hrend der \u00c4nderungsdetektion ausgef\u00fchrt.<\/p>\n<p>Mehr zu <code>effect<\/code> kannst Du nat\u00fcrlich auch wieder in der <a href=\"https:\/\/angular.dev\/guide\/signals#effects\">Dokumentation von Angular<\/a> finden.<\/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 unserem letzten Schritt wird <code>effect()<\/code> verwendet, um automatisch auf \u00c4nderungen der Signals <code>userRole<\/code> und <code>userRoleFromLogin<\/code> zu reagieren. Wenn <code>userHasSufficientPermission<\/code> wahr ist, wird die View mit <code>createEmbeddedView<\/code> erstellt. Andernfalls wird sie mit <code>clear()<\/code> entfernt. Damit haben wir den gesamten Reaktivit\u00e4tsmechanismus in einem <code>effect<\/code>-Block zusammengefasst, der bei jeder relevanten \u00c4nderung die View anpasst.<\/p>\n<h2>UserRoleRequired-Direktive: Signal Ansatz<\/h2>\n<p>Und das wars! Nach diesen vier einfach Schritten haben wir erfolgreich die <code>UserRoleRequired<\/code>-Direktive auf Signals umgestellt:<\/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>Hier siehst Du nochmal den vollst\u00e4ndigen Code, der alle vorherigen Verbesserungen beinhaltet. Durch die Verwendung von <code>inject()<\/code>, der <code>input()<\/code>-Funktion f\u00fcr die Eingabewerte, die Umwandlung von Observables mit <code>toSignal()<\/code> und der Kombination von Signals mit <code>effect<\/code>, haben wir den Code deutlich vereinfacht und gleichzeitig die Reaktivit\u00e4t und Wartbarkeit verbessert.<\/p>\n<h2>Probiere es selber aus: Hands-On mit Signal Directives<\/h2>\n<p>In unserem interaktiven StackBlitz-Beispiel kannst Du Dir die einzelnen Schritte und Zwischenst\u00e4nde im Code nochmal in Ruhe ansehen und selber probieren. Jeder Schritt ist dabei eine eigene Datei, damit auch hier der Code \u00fcbersichtlich bleibt.<\/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>Was kommt als n\u00e4chstes?<\/h2>\n<p>Mit Angular v19 gab es auch Neuigkeiten in Bezug auf Signals, die wir Dir nat\u00fcrlich nicht vorenthalten wollen. Unsere Blogreihe geht also weiter und im <a href=\"https:\/\/www.thecodecampus.de\/blog\/was-sind-linked-signals\/\">n\u00e4chsten Artikel<\/a> stellen wir Dir <code>linkedSignals<\/code> vor.<\/p>\n<h2 id=\"Termin\u00fcbersicht\">Termin\u00fcbersicht der n\u00e4chsten Angular Schulungen<\/h2>\n<p><iframe height=\"600\" style=\"width: 100%;\" src=\"https:\/\/thecodecampus.de\/kalender\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular unterscheidet zwischen Komponenten-, Struktur- und Attribut-Direktiven. In diesem Beitrag werden wir uns auf Struktur-Direktiven konzentrieren und Dir Schritt f\u00fcr Schritt zeigen, wie Du mit Signal Directives einfacher und effektiver arbeiten kannst. F\u00fcr einen kurzen Refresh zu 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,181,179,171,37,175],"class_list":["post-3007","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-performance-optimization","tag-angular-signal-inputs","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 Teil 5 - Schritt f\u00fcr Schritt zu Signal Directives<\/title>\n<meta name=\"description\" content=\"Angular 17: Arbeite besser mit Signal Directives! Lerne jetzt Schritt f\u00fcr Schritt, wie du deine Directives optimieren kannst.\" \/>\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\/arbeite-besser-mit-signal-directives\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Signals Teil 5 - Schritt f\u00fcr Schritt zu Signal Directives\" \/>\n<meta property=\"og:description\" content=\"Angular 17: Arbeite besser mit Signal Directives! Lerne jetzt Schritt f\u00fcr Schritt, wie du deine Directives optimieren kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-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:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-09T09:27:36+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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/arbeite-besser-mit-signal-directives\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/arbeite-besser-mit-signal-directives\\\/\"},\"author\":{\"name\":\"Marc Dommr\u00f6se\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/be8c4fcd8229783d0e9442dad8764770\"},\"headline\":\"Angular Signals Teil 5 &#8211; Schritt f\u00fcr Schritt zu Signal Directives\",\"datePublished\":\"2025-02-07T08:21:36+00:00\",\"dateModified\":\"2026-04-09T09:27:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/arbeite-besser-mit-signal-directives\\\/\"},\"wordCount\":1349,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/arbeite-besser-mit-signal-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 Performance Optimization\",\"Angular Signal Inputs\",\"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\\\/arbeite-besser-mit-signal-directives\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/arbeite-besser-mit-signal-directives\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/arbeite-besser-mit-signal-directives\\\/\",\"name\":\"Angular Signals Teil 5 - Schritt f\u00fcr Schritt zu Signal Directives\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/arbeite-besser-mit-signal-directives\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/arbeite-besser-mit-signal-directives\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/angular-signals-directives.png\",\"datePublished\":\"2025-02-07T08:21:36+00:00\",\"dateModified\":\"2026-04-09T09:27:36+00:00\",\"description\":\"Angular 17: Arbeite besser mit Signal Directives! Lerne jetzt Schritt f\u00fcr Schritt, wie du deine Directives optimieren kannst.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/arbeite-besser-mit-signal-directives\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/arbeite-besser-mit-signal-directives\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/arbeite-besser-mit-signal-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\\\/arbeite-besser-mit-signal-directives\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Signals Teil 5 &#8211; Schritt f\u00fcr Schritt zu 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 Teil 5 - Schritt f\u00fcr Schritt zu Signal Directives","description":"Angular 17: Arbeite besser mit Signal Directives! Lerne jetzt Schritt f\u00fcr Schritt, wie du deine Directives optimieren kannst.","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\/arbeite-besser-mit-signal-directives\/","og_locale":"en_US","og_type":"article","og_title":"Angular Signals Teil 5 - Schritt f\u00fcr Schritt zu Signal Directives","og_description":"Angular 17: Arbeite besser mit Signal Directives! Lerne jetzt Schritt f\u00fcr Schritt, wie du deine Directives optimieren kannst.","og_url":"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-directives\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2025-02-07T08:21:36+00:00","article_modified_time":"2026-04-09T09:27:36+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":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-directives\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-directives\/"},"author":{"name":"Marc Dommr\u00f6se","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/be8c4fcd8229783d0e9442dad8764770"},"headline":"Angular Signals Teil 5 &#8211; Schritt f\u00fcr Schritt zu Signal Directives","datePublished":"2025-02-07T08:21:36+00:00","dateModified":"2026-04-09T09:27:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-directives\/"},"wordCount":1349,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-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 Performance Optimization","Angular Signal Inputs","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\/arbeite-besser-mit-signal-directives\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-directives\/","url":"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-directives\/","name":"Angular Signals Teil 5 - Schritt f\u00fcr Schritt zu Signal Directives","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-directives\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-directives\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/03\/angular-signals-directives.png","datePublished":"2025-02-07T08:21:36+00:00","dateModified":"2026-04-09T09:27:36+00:00","description":"Angular 17: Arbeite besser mit Signal Directives! Lerne jetzt Schritt f\u00fcr Schritt, wie du deine Directives optimieren kannst.","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-directives\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-directives\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/arbeite-besser-mit-signal-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\/arbeite-besser-mit-signal-directives\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Signals Teil 5 &#8211; Schritt f\u00fcr Schritt zu 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\/3007","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=3007"}],"version-history":[{"count":33,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3007\/revisions"}],"predecessor-version":[{"id":3713,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3007\/revisions\/3713"}],"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=3007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=3007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=3007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}