{"id":10523,"date":"2025-03-18T13:44:00","date_gmt":"2025-03-18T13:44:00","guid":{"rendered":"https:\/\/ciit-training.com\/?p=10523"},"modified":"2025-03-18T13:44:01","modified_gmt":"2025-03-18T13:44:01","slug":"angular-vorteile-der-ueberarbeiteten-control-flow-elemente","status":"publish","type":"post","link":"https:\/\/ciit-training.com\/en\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/","title":{"rendered":"Angular: Advantages of the revised control flow elements"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Was ist Angular?<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Das von Google entwickelte Web-Framework Angular<\/a> unterst\u00fctzt Entwickler:innen bei der Erstellung von Single-Page-Webanwendungen. Basierend auf TypeScript, bietet es eine Vielzahl an Funktionen und Tools ausgerichtet auf die Optimierung des Entwicklungsflows. Dabei erm\u00f6glicht Angular eine effiziente Zwei-Wege-Datenbindung und vereinfacht die Synchronisierung der Benutzeroberfl\u00e4che mit dem zugrunde liegenden Datenmodell.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Nglf, NgFor und NgSwitch<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Wer sich auf die Reise in die Welt von Angular begibt, st\u00f6\u00dft bald auf die Control-Flow-Elemente NgIf, NgFor und NgSwitch. Diese Direktiven erm\u00f6glichen es, Inhalte bedingt anzuzeigen, zu verbergen oder zu wiederholen. Auf den ersten Blick mag dies unkompliziert wirken, doch eine \u00dcberarbeitung der urspr\u00fcnglichen Konzepte war notwendig, um Unklarheiten zu vermeiden. Seit Angular 18 stehen nun modifizierte Direktiven zur Verf\u00fcgung, welche insbesondere eine Anpassung der Syntax beinhalten. In diesem Artikel m\u00f6chte ich die \u00fcberarbeitete Syntax anhand einfacher Beispiele vorstellen und die damit verbundenen Vorteile erl\u00e4utern. Eine offizielle Dokumentation ist hier<\/a> zu finden.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

1. @if<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Die urspr\u00fcnglichen NgIf-Direktive basieren auf einem simplen Prinzip:\u00a0Sobald die erforderliche Bedingung erf\u00fcllt ist, wird das Element angezeigt.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t@Component({\n selector: 'app-root',\n standalone: true,\n template: `\n   <div *ngIf=\"condition\"><\/div>\n `,\n imports: [NgIf]\n})\nexport class App {}\n\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8baf9af exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"8baf9af\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Das Einbauen eines Else-Zweigs schaffte Verwirrung:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9cf84f3 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-code-highlight\" data-id=\"9cf84f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>@Component({\n selector: 'app-root',\n standalone: true,\n template: `\n   <div *ngIf=\"condition; else falseMessage\"><\/div>\n   ... some other html content of the page ...\n   <ng-template #falseMessage>...<\/ng-template>\n `,\n imports: [NgIf],\n})\nexport class App {}\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea9b6a7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"ea9b6a7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Die Syntax unterschied sich stark von der If-Else-Syntax aus TypeScript, was die Zug\u00e4nglichkeit erschwerte und zu Unklarheiten f\u00fchrte. Eine Anpassung der Direktive sorgte f\u00fcr ein h\u00f6heres Ma\u00df an \u00dcbersicht und Sauberkeit. Die \u00fcberarbeitete Syntax:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-988324f exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-code-highlight\" data-id=\"988324f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>@Component({\n selector: 'app-root',\n standalone: true,\n template: `\n   @if(condition) {\n     <div>Content<\/div>\n   } @else {\n     <div>False Message<\/div>\n   }\n `,\n imports: [NgIf],\n})\nexport class App {}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc4abfc exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"dc4abfc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">2. @for<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-194dcad exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"194dcad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Die Anpassung der NgFor-Syntax brachte weniger Ver\u00e4nderungen mit sich. Ein wesentlicher Punkt ist jedoch folgender: Gr\u00f6\u00dfere Datenmengen resultieren h\u00e4ufig in Performance-Problemen, da das Attribut <i>trackBy<\/i> leicht zu \u00fcbersehen war. Die urspr\u00fcngliche Syntax:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e52ea2e exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-code-highlight\" data-id=\"e52ea2e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>@Component({\n selector: 'app-root',\n standalone: true,\n template: `\n   <div *ngFor=\"let item of items\">\n    ...\n   <\/div>\n `,\n imports: [NgFor],\n})\nexport class App {\n items: any[] = [];\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0c05a1 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"d0c05a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Das Angular-Team entschied sich hierbei f\u00fcr eine einfache L\u00f6sung: In der angepassten Version wurde das Attribut <i>track<\/i> verpflichtend gemacht. Ein weiterer \u00fcberarbeiteter Punkt betraf die M\u00f6glichkeit, die Liste ohne zus\u00e4tzlicher NgIf-Kontrolle auf Leerheit zu pr\u00fcfen. Au\u00dferdem wurden f\u00fcr den NgFor-Block mehrere neue Kontext-Variablen eingef\u00fchrt, wie beispielsweise <i>$first<\/i> oder <i>$last<\/i>. Die vollst\u00e4ndige Liste ist <a href=\"https:\/\/angular.dev\/guide\/templates\/control-flow#contextual-variables-in-for-blocks\">hier<\/a> zu finden. Die \u00fcberarbeitete Syntax:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f0168dc exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-code-highlight\" data-id=\"f0168dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>@Component({\n selector: 'app-root',\n standalone: true,\n template: `\n   @for (item of items; track item.id) {\n     <div><\/div>\n   } @empty {\n     List is empty\n   }\n `,\n imports: [NgFor],\n})\nexport class App {\n items: any[] = [];\n}\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc32483 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"fc32483\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">3. @switch<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a05bde1 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"a05bde1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Grunds\u00e4tzlich war das urspr\u00fcngliche Konzept der drei Direktiven NgSwitch, NgSwitchCase und NgSwitchDefault leicht verst\u00e4ndlich und einfach anzuwenden. Die urspr\u00fcngliche Syntax:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe3f233 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-code-highlight\" data-id=\"fe3f233\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>type State = 'PENDING' | 'IN_PROGESS' | 'DONE';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n template: `\n   <div [ngSwitch]=\"currentState\">\n     <ng-container *ngSwitchCase=\"'PENDING'\">Pending<\/ng-container>\n     <ng-container *ngSwitchCase=\"'IN_PROGRESS'\">Progress<\/ng-container>\n     <ng-container *ngSwitchCase=\"'DONE'\">Done<\/ng-container>\n     <ng-container *ngSwitchDefault>No State<\/ng-container>\n   <\/div>\n `,\n imports: [NgSwitch, NgSwitchCase, NgSwitchDefault],\n})\nexport class App {\n currentState!: State;\n}\n\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac231b9 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"ac231b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Die \u00dcberarbeitung der Syntax sorgte jedoch f\u00fcr ein erh\u00f6htes Ma\u00df an Lesbarkeit und orientierte sich st\u00e4rker an der bekannten Syntax aus TypeScript. Die \u00fcberarbeitete Syntax:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef01831 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-code-highlight\" data-id=\"ef01831\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>type State = 'PENDING' | 'IN_PROGESS' | 'DONE';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n template: `\n     @switch (currentState) {\n       @case ('PENDING') {\n         Pending\n       }\n       @case ('IN_PROGESS') {\n         In Progress\n       }\n       @case ('DONE') {\n         Done\n       }\n       @default {\n         No state\n       }\n     }\n `,\n imports: [NgSwitch, NgSwitchCase, NgSwitchDefault],\n})\nexport class App {\n currentState: State = 'PENDING';\n}\n\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7950da exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"b7950da\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Migration und R\u00fcckw\u00e4rtskompatibilit\u00e4t<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7f6bab exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"e7f6bab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Angular bietet die M\u00f6glichkeit, die veralteten Direktive mit folgendem Befehl zu migrieren:<\/p><p>ng g @angular\/core:control-flow<\/p><p>Wer jedoch weiterhin die gewohnte Syntax verwenden m\u00f6chte, muss nicht darauf verzichten. Zur Sicherstellung der R\u00fcckw\u00e4rtskompatibilit\u00e4t k\u00f6nnen die urspr\u00fcnglichen Direktiven weiterhin genutzt werden und sollen voraussichtlich auch in den kommenden Versionen unterst\u00fctzt werden.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d941ad7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"d941ad7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Zusammenfassung<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2838ab0 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"2838ab0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Die neuen Control-Flow-Elemente in Angular steigern die Lesbarkeit des Codebases, verfeinern dessen Struktur und reduzieren die Notwendigkeit von \u00fcberfl\u00fcssigem Boilerplate-Code. Zudem sorgen sie f\u00fcr eine intuitive Syntax und eine bessere Wartbarkeit.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2cff2ff exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"2cff2ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2025\/03\/PPT-Praesentation-_48_-1024x576.avif\" class=\"attachment-large size-large wp-image-10538\" alt=\"\" srcset=\"https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2025\/03\/PPT-Praesentation-_48_-1024x576.avif 1024w, https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2025\/03\/PPT-Praesentation-_48_-300x169.avif 300w, https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2025\/03\/PPT-Praesentation-_48_-768x432.avif 768w, https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2025\/03\/PPT-Praesentation-_48_-1536x864.avif 1536w, https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2025\/03\/PPT-Praesentation-_48_-2048x1152.avif 2048w, https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2025\/03\/PPT-Praesentation-_48_-18x10.avif 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Was ist Angular? Das von Google entwickelte Web-Framework Angular unterst\u00fctzt Entwickler:innen bei der Erstellung von Single-Page-Webanwendungen. Basierend auf TypeScript, bietet es eine Vielzahl an Funktionen und Tools ausgerichtet auf die Optimierung des Entwicklungsflows. Dabei erm\u00f6glicht Angular eine effiziente Zwei-Wege-Datenbindung und vereinfacht die Synchronisierung der Benutzeroberfl\u00e4che mit dem zugrunde liegenden Datenmodell. Nglf, NgFor und NgSwitch Wer [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":10538,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[113,75,77,76,116,108,102,114,85,86,98,109,115],"class_list":["post-10523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-angular","tag-ciit","tag-ciit-software","tag-ciit-training","tag-code","tag-it","tag-programmieren","tag-programmiersprachen","tag-software-developer","tag-software-engineer","tag-softwareentwicklung","tag-tech","tag-webentwicklung"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular: Vorteile der \u00fcberarbeiteten Control-Flow-Elemente - CIIT Training<\/title>\n<meta name=\"description\" content=\"Die \u00fcberarbeiteten Control-Flow-Elemente in Angular verbessern die Performance und Flexibilit\u00e4t von Anwendungen. Erfahre mehr!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ciit-training.com\/en\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular: Vorteile der \u00fcberarbeiteten Control-Flow-Elemente - CIIT Training\" \/>\n<meta property=\"og:description\" content=\"Die \u00fcberarbeiteten Control-Flow-Elemente in Angular verbessern die Performance und Flexibilit\u00e4t von Anwendungen. Erfahre mehr!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ciit-training.com\/en\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/\" \/>\n<meta property=\"og:site_name\" content=\"CIIT Training\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javatraining.at\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-18T13:44:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-18T13:44:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2023\/11\/CIIT_Logo_BrightBackground_Blau_ohne_at.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"wiki\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JavaTrainingAT\" \/>\n<meta name=\"twitter:site\" content=\"@JavaTrainingAT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"wiki\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/ciit-training.com\\\/2025\\\/03\\\/18\\\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ciit-training.com\\\/2025\\\/03\\\/18\\\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\\\/\"},\"author\":{\"name\":\"wiki\",\"@id\":\"https:\\\/\\\/ciit-training.com\\\/#\\\/schema\\\/person\\\/da3b2b472673dcc7f0933808391c9ccf\"},\"headline\":\"Angular: Vorteile der \u00fcberarbeiteten Control-Flow-Elemente\",\"datePublished\":\"2025-03-18T13:44:00+00:00\",\"dateModified\":\"2025-03-18T13:44:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ciit-training.com\\\/2025\\\/03\\\/18\\\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\\\/\"},\"wordCount\":482,\"publisher\":{\"@id\":\"https:\\\/\\\/ciit-training.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ciit-training.com\\\/2025\\\/03\\\/18\\\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ciit-training.com\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/03\\\/PPT-Praesentation-_48_-scaled.avif\",\"keywords\":[\"Angular\",\"CIIT\",\"CIIT Software\",\"CIIT Training\",\"Code\",\"IT\",\"Programmieren\",\"Programmiersprachen\",\"Software Developer\",\"Software Engineer\",\"Softwareentwicklung\",\"Tech\",\"Webentwicklung\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ciit-training.com\\\/2025\\\/03\\\/18\\\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\\\/\",\"url\":\"https:\\\/\\\/ciit-training.com\\\/2025\\\/03\\\/18\\\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\\\/\",\"name\":\"Angular: Vorteile der \u00fcberarbeiteten Control-Flow-Elemente - CIIT Training\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ciit-training.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ciit-training.com\\\/2025\\\/03\\\/18\\\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ciit-training.com\\\/2025\\\/03\\\/18\\\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ciit-training.com\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/03\\\/PPT-Praesentation-_48_-scaled.avif\",\"datePublished\":\"2025-03-18T13:44:00+00:00\",\"dateModified\":\"2025-03-18T13:44:01+00:00\",\"description\":\"Die \u00fcberarbeiteten Control-Flow-Elemente in Angular verbessern die Performance und Flexibilit\u00e4t von Anwendungen. Erfahre mehr!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ciit-training.com\\\/2025\\\/03\\\/18\\\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ciit-training.com\\\/2025\\\/03\\\/18\\\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ciit-training.com\\\/2025\\\/03\\\/18\\\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ciit-training.com\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/03\\\/PPT-Praesentation-_48_-scaled.avif\",\"contentUrl\":\"https:\\\/\\\/ciit-training.com\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/03\\\/PPT-Praesentation-_48_-scaled.avif\",\"width\":2560,\"height\":1440},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ciit-training.com\\\/2025\\\/03\\\/18\\\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ciit-training.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular: Vorteile der \u00fcberarbeiteten Control-Flow-Elemente\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ciit-training.com\\\/#website\",\"url\":\"https:\\\/\\\/ciit-training.com\\\/\",\"name\":\"CIIT Training\",\"description\":\"Javatraing\",\"publisher\":{\"@id\":\"https:\\\/\\\/ciit-training.com\\\/#organization\"},\"alternateName\":\"Javatraining\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ciit-training.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ciit-training.com\\\/#organization\",\"name\":\"CIIT GmbH\",\"alternateName\":\"Schaffler & Gl\u00f6\u00dfl GmbH\",\"url\":\"https:\\\/\\\/ciit-training.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ciit-training.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ciit-training.com\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2023\\\/11\\\/CIIT_Logo_BrightBackground_Blau_ohne_at.png\",\"contentUrl\":\"https:\\\/\\\/ciit-training.com\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2023\\\/11\\\/CIIT_Logo_BrightBackground_Blau_ohne_at.png\",\"width\":512,\"height\":512,\"caption\":\"CIIT GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/ciit-training.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javatraining.at\",\"https:\\\/\\\/x.com\\\/JavaTrainingAT\",\"https:\\\/\\\/www.linkedin.com\\\/showcase\\\/javatraining.at\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ciit-training.com\\\/#\\\/schema\\\/person\\\/da3b2b472673dcc7f0933808391c9ccf\",\"name\":\"wiki\",\"url\":\"https:\\\/\\\/ciit-training.com\\\/en\\\/author\\\/wiki\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular: Vorteile der \u00fcberarbeiteten Control-Flow-Elemente - CIIT Training","description":"Die \u00fcberarbeiteten Control-Flow-Elemente in Angular verbessern die Performance und Flexibilit\u00e4t von Anwendungen. Erfahre mehr!","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:\/\/ciit-training.com\/en\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/","og_locale":"en_US","og_type":"article","og_title":"Angular: Vorteile der \u00fcberarbeiteten Control-Flow-Elemente - CIIT Training","og_description":"Die \u00fcberarbeiteten Control-Flow-Elemente in Angular verbessern die Performance und Flexibilit\u00e4t von Anwendungen. Erfahre mehr!","og_url":"https:\/\/ciit-training.com\/en\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/","og_site_name":"CIIT Training","article_publisher":"https:\/\/www.facebook.com\/javatraining.at","article_published_time":"2025-03-18T13:44:00+00:00","article_modified_time":"2025-03-18T13:44:01+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2023\/11\/CIIT_Logo_BrightBackground_Blau_ohne_at.png","type":"image\/png"}],"author":"wiki","twitter_card":"summary_large_image","twitter_creator":"@JavaTrainingAT","twitter_site":"@JavaTrainingAT","twitter_misc":{"Written by":"wiki","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/ciit-training.com\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/#article","isPartOf":{"@id":"https:\/\/ciit-training.com\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/"},"author":{"name":"wiki","@id":"https:\/\/ciit-training.com\/#\/schema\/person\/da3b2b472673dcc7f0933808391c9ccf"},"headline":"Angular: Vorteile der \u00fcberarbeiteten Control-Flow-Elemente","datePublished":"2025-03-18T13:44:00+00:00","dateModified":"2025-03-18T13:44:01+00:00","mainEntityOfPage":{"@id":"https:\/\/ciit-training.com\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/"},"wordCount":482,"publisher":{"@id":"https:\/\/ciit-training.com\/#organization"},"image":{"@id":"https:\/\/ciit-training.com\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/#primaryimage"},"thumbnailUrl":"https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2025\/03\/PPT-Praesentation-_48_-scaled.avif","keywords":["Angular","CIIT","CIIT Software","CIIT Training","Code","IT","Programmieren","Programmiersprachen","Software Developer","Software Engineer","Softwareentwicklung","Tech","Webentwicklung"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ciit-training.com\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/","url":"https:\/\/ciit-training.com\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/","name":"Angular: Vorteile der \u00fcberarbeiteten Control-Flow-Elemente - CIIT Training","isPartOf":{"@id":"https:\/\/ciit-training.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ciit-training.com\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/#primaryimage"},"image":{"@id":"https:\/\/ciit-training.com\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/#primaryimage"},"thumbnailUrl":"https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2025\/03\/PPT-Praesentation-_48_-scaled.avif","datePublished":"2025-03-18T13:44:00+00:00","dateModified":"2025-03-18T13:44:01+00:00","description":"Die \u00fcberarbeiteten Control-Flow-Elemente in Angular verbessern die Performance und Flexibilit\u00e4t von Anwendungen. Erfahre mehr!","breadcrumb":{"@id":"https:\/\/ciit-training.com\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ciit-training.com\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ciit-training.com\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/#primaryimage","url":"https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2025\/03\/PPT-Praesentation-_48_-scaled.avif","contentUrl":"https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2025\/03\/PPT-Praesentation-_48_-scaled.avif","width":2560,"height":1440},{"@type":"BreadcrumbList","@id":"https:\/\/ciit-training.com\/2025\/03\/18\/angular-vorteile-der-ueberarbeiteten-control-flow-elemente\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ciit-training.com\/"},{"@type":"ListItem","position":2,"name":"Angular: Vorteile der \u00fcberarbeiteten Control-Flow-Elemente"}]},{"@type":"WebSite","@id":"https:\/\/ciit-training.com\/#website","url":"https:\/\/ciit-training.com\/","name":"CIIT Training","description":"Java training","publisher":{"@id":"https:\/\/ciit-training.com\/#organization"},"alternateName":"Javatraining","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ciit-training.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ciit-training.com\/#organization","name":"CIIT GmbH","alternateName":"Schaffler & Gl\u00f6\u00dfl GmbH","url":"https:\/\/ciit-training.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ciit-training.com\/#\/schema\/logo\/image\/","url":"https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2023\/11\/CIIT_Logo_BrightBackground_Blau_ohne_at.png","contentUrl":"https:\/\/ciit-training.com\/wp-content\/uploads\/sites\/2\/2023\/11\/CIIT_Logo_BrightBackground_Blau_ohne_at.png","width":512,"height":512,"caption":"CIIT GmbH"},"image":{"@id":"https:\/\/ciit-training.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javatraining.at","https:\/\/x.com\/JavaTrainingAT","https:\/\/www.linkedin.com\/showcase\/javatraining.at\/"]},{"@type":"Person","@id":"https:\/\/ciit-training.com\/#\/schema\/person\/da3b2b472673dcc7f0933808391c9ccf","name":"wiki","url":"https:\/\/ciit-training.com\/en\/author\/wiki\/"}]}},"_links":{"self":[{"href":"https:\/\/ciit-training.com\/en\/wp-json\/wp\/v2\/posts\/10523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ciit-training.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ciit-training.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ciit-training.com\/en\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/ciit-training.com\/en\/wp-json\/wp\/v2\/comments?post=10523"}],"version-history":[{"count":0,"href":"https:\/\/ciit-training.com\/en\/wp-json\/wp\/v2\/posts\/10523\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ciit-training.com\/en\/wp-json\/wp\/v2\/media\/10538"}],"wp:attachment":[{"href":"https:\/\/ciit-training.com\/en\/wp-json\/wp\/v2\/media?parent=10523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ciit-training.com\/en\/wp-json\/wp\/v2\/categories?post=10523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ciit-training.com\/en\/wp-json\/wp\/v2\/tags?post=10523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}