{"id":24792,"date":"2023-11-27T09:00:00","date_gmt":"2023-11-27T08:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=24792"},"modified":"2023-11-24T12:53:43","modified_gmt":"2023-11-24T11:53:43","slug":"angular-control-flow-the-complete-guide","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/","title":{"rendered":"Angular Control Flow: the Complete Guide"},"content":{"rendered":"\n<p id=\"110e\">Angular v17 was released some days ago with a ton of new features, a brand-new logo and the new blog&nbsp;<a href=\"http:\/\/angular.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">angular.dev<\/a>.<\/p>\n\n\n\n<p id=\"4e83\">In this article, I will dive into the new control flow, which will make you forget about directives like&nbsp;<strong>ngIf<\/strong>,&nbsp;<strong>ngSwitch<\/strong>&nbsp;and&nbsp;<strong>ngFor<\/strong>&nbsp;thanks to a new syntax to write&nbsp;<strong>if<\/strong>,&nbsp;<strong>if\/else<\/strong>&nbsp;and&nbsp;<strong>switch<\/strong>&nbsp;statements and the&nbsp;<strong>for<\/strong>&nbsp;loop in our template.<\/p>\n\n\n\n<p class=\"has-text-align-left\" id=\"00f2\">\u26a0\ufe0f <strong>FIRST ALERT:<\/strong>&nbsp;the new control flow is still in developer preview \u26a0\ufe0f<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p id=\"9398\">But now let\u2019s start our journey learning about the most fundamental condition:&nbsp;<strong>@if<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"07a5\">@if condition<\/h2>\n\n\n\n<p id=\"dd32\">In order to show a block of template based on a condition it has always been used the directive&nbsp;<strong>ngIf<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript\"><span class=\"hljs-meta\">@Component<\/span>({\n  standalone: <span class=\"hljs-literal\">true<\/span>,\n  template: <span class=\"hljs-string\">`&lt;div *ngIf=\"condition\"&gt; ... &lt;\/div&gt;`<\/span>,\n  imports: &#91;NgIf]\n})\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> MyComponent {}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"c337\">This simple directive has indeed some&nbsp;<strong>cons<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The syntax is not intuitive and very framework-related;<\/li>\n\n\n\n<li>It\u2019s not possible to apply it to groups of elements, to do so you need to wrap the elements inside a container or&nbsp;<strong>ng-template<\/strong>\/<strong>ng-container<\/strong>;<\/li>\n\n\n\n<li>You need to import&nbsp;<strong>CommonModule&nbsp;<\/strong>or the directive&nbsp;<strong>NgIf<\/strong>&nbsp;in your modules.<\/li>\n<\/ul>\n\n\n\n<p id=\"8a3f\">The new&nbsp;<strong>@if<\/strong>&nbsp;condition lets you obtain the same result:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">@if (condition) {\n  * your content *\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"8ae1\"><strong>@if<\/strong>&nbsp;offers you a cleaner syntax, the conditional blocks stand out immediately while reading the template, allowing you to wrap groups of elements inside&nbsp;curly brackets&nbsp;and most of all:&nbsp;<strong>no more modules or directives to import<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"63e0\">@else e @else\/if<\/h3>\n\n\n\n<p id=\"e23e\"><strong>if\/else<\/strong>&nbsp;condition were always a pain in Angular:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> *<span class=\"hljs-attr\">ngIf<\/span>=<span class=\"hljs-string\">\"condition; else otherTemplate\"<\/span>&gt;<\/span>\n  * your content *\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ng-template<\/span> #<span class=\"hljs-attr\">otherTemplate<\/span>&gt;<\/span>\n  * your other content *\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ng-template<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"20bb\">The need of an&nbsp;<strong>ng-template<\/strong>&nbsp;combined with a&nbsp;<strong>template variable<\/strong>&nbsp;to provide at&nbsp;<strong>ngIf<\/strong>&nbsp;directive a backup block was always tricky and not very immediate.<\/p>\n\n\n\n<p id=\"9d3e\">And here is where&nbsp;<strong>@if<\/strong>&nbsp;helps the most, in fact, it can be extended using&nbsp;<strong>@else<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">@if (condition) {\n  * your content *\n} @else {\n  * your other content *\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"29c0\">But it\u2019s not just that,&nbsp;<strong>@if<\/strong>&nbsp;can be extended even more using&nbsp;<strong>@else\/if<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">@if (condition) {\n  * your content *\n} @else if (secondCondition) {\n  * your second content *\n} @else {\n  * your other content *\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"def7\">Thanks to this you can create templates with complex conditions writing clean and intuitive code. Easy to read, easy to maintain.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p id=\"a04e\">Now, let\u2019s proceed with&nbsp;<strong>@switch<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"e3f8\">@switch condition<\/h2>\n\n\n\n<p id=\"e218\">Up until today, the&nbsp;<strong>ngSwitch<\/strong>&nbsp;directive was used to show a certain block of template in a list based on a switch condition:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> &#91;<span class=\"hljs-attr\">ngSwitch<\/span>]=<span class=\"hljs-string\">\"condition\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> *<span class=\"hljs-attr\">ngSwitchCase<\/span>=<span class=\"hljs-string\">\"value1\"<\/span>&gt;<\/span>* content block value1 *<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> *<span class=\"hljs-attr\">ngSwitchCase<\/span>=<span class=\"hljs-string\">\"value2\"<\/span>&gt;<\/span>* content block value2 *<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> *<span class=\"hljs-attr\">ngSwitchDefault<\/span>&gt;<\/span>* default content *<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"13b6\">Similarly to&nbsp;<strong>@if<\/strong>&nbsp;there is now a brand new&nbsp;<strong>@switch<\/strong>&nbsp;condition:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">@switch(condition) {\n  @case ('value1') {\n    * content block value1 *\n  } @case ('value2') {\n    * content block value2 *\n  } @default {\n    * default content *\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"0080\">In this case, you can obtain a cleaner syntax and&nbsp;<strong>no more imports<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p id=\"b226\">Here we are at the last topic: the&nbsp;<strong>@for<\/strong>&nbsp;loop.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"14ff\">@for loop<\/h2>\n\n\n\n<p id=\"84f9\">Showing a list of blocks in a template to represent a list of elements is a key concept of a lot of frameworks, and in Angular this task could be accomplished using the&nbsp;<strong>ngFor<\/strong>&nbsp;directive:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> *<span class=\"hljs-attr\">ngFor<\/span>=<span class=\"hljs-string\">\"let item of itemList\"<\/span>&gt;<\/span>\n    {{ item.name }}\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"76fd\">This directive allows you to create a customized block for each element of the list, thanks to the ability to use the information of the single element and some&nbsp;<strong>local variables<\/strong>&nbsp;provided by the directive itself:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>index: number<\/code>: index of the element in the list;<\/li>\n\n\n\n<li><code>count: number<\/code>: the length of the list;<\/li>\n\n\n\n<li><code>first: boolean<\/code>: true if the element is the first of the list;<\/li>\n\n\n\n<li><code>last: boolean<\/code>: true if the element is the last of the list;<\/li>\n\n\n\n<li><code>even: boolean<\/code>: true if the element index is even;<\/li>\n\n\n\n<li><code>odd: boolean<\/code>: true if the element index is odd.<\/li>\n<\/ul>\n\n\n\n<p id=\"8772\">Also, the&nbsp;<strong>ngFor<\/strong>&nbsp;directive accepts a function called&nbsp;<strong>trackBy<\/strong>&nbsp;as an optional parameter, used to provide Angular a&nbsp;<strong>unique identifier<\/strong>&nbsp;for each element of the list (like an id):<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> *<span class=\"hljs-attr\">ngFor<\/span>=<span class=\"hljs-string\">\"let item of itemList; trackBy: itemById\"<\/span>&gt;<\/span>\n    {{ item.name }}\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript\"> itemById(index, item) {\n  <span class=\"hljs-keyword\">return<\/span> item.id;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"b30e\">Thanks to this Angular is able to&nbsp;<strong>optimize the performance<\/strong>&nbsp;when the list is replaced or an element is modified.<\/p>\n\n\n\n<p id=\"89cc\">So, in order to replace the&nbsp;<strong>ngFor<\/strong>&nbsp;directive the new control flow provides&nbsp;<strong>@for<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n  @for (item of itemList; track item.id; let idx = $index, e = $even) {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>{{ item.name }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n  }\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"e048\">This new syntax brings some important changes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Performance improvements up to 90% as compared to ngFor<\/strong>, thanks to the new algorithm used to implement&nbsp;<strong>@for<\/strong>;<\/li>\n\n\n\n<li>The&nbsp;<strong>trackBy<\/strong>&nbsp;function is replaced by the&nbsp;<strong>track<\/strong>&nbsp;property which requires providing an expression, easier to write and read than an entire function;<\/li>\n\n\n\n<li>The&nbsp;<strong>track property is required<\/strong>&nbsp;so that we are not going to forget it, as it happens commonly with the trackBy function;<\/li>\n\n\n\n<li>The&nbsp;<strong>local variables have now the prefix $<\/strong>&nbsp;(e.g.:&nbsp;<strong>$index<\/strong>).<\/li>\n<\/ul>\n\n\n\n<p id=\"272c\">Furthermore you can obtain also a cleaner syntax and&nbsp;<strong>no more imports<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6620\">@empty block<\/h3>\n\n\n\n<p id=\"de97\">Finally, the new&nbsp;<strong>@for<\/strong>&nbsp;loop brings a really useful&nbsp;<strong>@placeholder<\/strong>&nbsp;condition that allows to show a block if the list is empty:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">@for (item of itemList; track item.id) {\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>{{ item.name }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n} @placeholder {\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>No items available<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"b4ff\">Awesome indeed \ud83e\udd29<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"c96d\">Conclusion:<\/h2>\n\n\n\n<p id=\"1a9d\">As you can see the new control flow offers a fresh new way to write complex template conditions in our Angular applications, which brings&nbsp;<strong><a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/why-is-web-performance-more-important-than-ever\/\" target=\"_blank\" aria-label=\"performance improvements (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">performance improvements<\/a><\/strong>&nbsp;and more&nbsp;<strong>maintainable code<\/strong>.<\/p>\n\n\n\n<p class=\"has-text-align-left\" id=\"c970\">\u26a0\ufe0f <strong>LAST ALERT:<\/strong>&nbsp;the new control flow is still in developer preview \u26a0\ufe0f<\/p>\n\n\n\n<p id=\"719a\">If you want to try it already I suggest you test it on your existing projects. You just have to&nbsp;<strong>ng update<\/strong>&nbsp;your app and use the migration command offered by the&nbsp;<strong>Angular CLI<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"Bash\" data-shcb-language-slug=\"bash\"><span><code class=\"hljs language-bash\">ng generate @angular\/core:control-flow<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Bash<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">bash<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Thanks for reading, I\u2019d like to have your feedback so please&nbsp;feel free to contact me for any.&nbsp;\ud83d\udc4b<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular v17 was released some days ago with a ton of new features, a brand-new logo and the new blog&nbsp;angular.dev. In this article, I will dive into the new control flow, which will make you forget about directives like&nbsp;ngIf,&nbsp;ngSwitch&nbsp;and&nbsp;ngFor&nbsp;thanks to a new syntax to write&nbsp;if,&nbsp;if\/else&nbsp;and&nbsp;switch&nbsp;statements and the&nbsp;for&nbsp;loop in our template. \u26a0\ufe0f FIRST ALERT:&nbsp;the new control&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/\">Read more<\/a><\/p>\n","protected":false},"author":200,"featured_media":24889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[4141,11568],"collections":[],"class_list":{"0":"post-24792","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-angular","9":"tag-control-flow","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Angular Control Flow: the Complete Guide - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Angular v17 was released with a ton of new features. Let&#039;s dive into the new Angular control flow: @if, @switch and @for.\" \/>\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.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Control Flow: the Complete Guide\" \/>\n<meta property=\"og:description\" content=\"Let&#039;s dive into the new Angular control flow: @if, @switch and @for.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-27T08:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"828\" \/>\n\t<meta property=\"og:image:height\" content=\"414\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Davide Passafaro\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Davide Passafaro\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/\"},\"author\":{\"name\":\"Davide Passafaro\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\"},\"headline\":\"Angular Control Flow: the Complete Guide\",\"datePublished\":\"2023-11-27T08:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/\"},\"wordCount\":857,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp\",\"keywords\":[\"Angular\",\"Control Flow\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/\",\"name\":\"Angular Control Flow: the Complete Guide - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp\",\"datePublished\":\"2023-11-27T08:00:00+00:00\",\"description\":\"Angular v17 was released with a ton of new features. Let's dive into the new Angular control flow: @if, @switch and @for.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp\",\"width\":828,\"height\":414,\"caption\":\"angular, control flow\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular Control Flow: the Complete Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\",\"name\":\"Davide Passafaro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png\",\"caption\":\"Davide Passafaro\"},\"description\":\"My name is Davide Passafaro and I am Senior Frontend Engineer at Awork. I lead two developer communities in Rome, GDG Roma Citt\u00e0 and Angular Rome, and actively contribute to the tech community as a writer and speaker. When i shut down my computer I like to play board games and archery, not both together till now. I also like escape rooms and memes.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/davide-passafaro\/\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular Control Flow: the Complete Guide - Codemotion Magazine","description":"Angular v17 was released with a ton of new features. Let's dive into the new Angular control flow: @if, @switch and @for.","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.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/","og_locale":"en_US","og_type":"article","og_title":"Angular Control Flow: the Complete Guide","og_description":"Let's dive into the new Angular control flow: @if, @switch and @for.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-11-27T08:00:00+00:00","og_image":[{"width":828,"height":414,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp","type":"image\/webp"}],"author":"Davide Passafaro","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Davide Passafaro","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/"},"author":{"name":"Davide Passafaro","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828"},"headline":"Angular Control Flow: the Complete Guide","datePublished":"2023-11-27T08:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/"},"wordCount":857,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp","keywords":["Angular","Control Flow"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/","name":"Angular Control Flow: the Complete Guide - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp","datePublished":"2023-11-27T08:00:00+00:00","description":"Angular v17 was released with a ton of new features. Let's dive into the new Angular control flow: @if, @switch and @for.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp","width":828,"height":414,"caption":"angular, control flow"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/angular-control-flow-the-complete-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Angular Control Flow: the Complete Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828","name":"Davide Passafaro","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png","caption":"Davide Passafaro"},"description":"My name is Davide Passafaro and I am Senior Frontend Engineer at Awork. I lead two developer communities in Rome, GDG Roma Citt\u00e0 and Angular Rome, and actively contribute to the tech community as a writer and speaker. When i shut down my computer I like to play board games and archery, not both together till now. I also like escape rooms and memes.","sameAs":["https:\/\/www.linkedin.com\/in\/davide-passafaro\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-600x400.webp","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-600x414.webp","author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp",828,414,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-150x150.webp",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-300x150.webp",300,150,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-768x384.webp",768,384,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp",828,414,false],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp",828,414,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp",828,414,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-100x100.webp",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-180x128.webp",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp",828,414,false],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-400x225.webp",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-600x400.webp",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-600x414.webp",600,414,true]},"uagb_author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_comment_info":0,"uagb_excerpt":"Angular v17 was released some days ago with a ton of new features, a brand-new logo and the new blog&nbsp;angular.dev. In this article, I will dive into the new control flow, which will make you forget about directives like&nbsp;ngIf,&nbsp;ngSwitch&nbsp;and&nbsp;ngFor&nbsp;thanks to a new syntax to write&nbsp;if,&nbsp;if\/else&nbsp;and&nbsp;switch&nbsp;statements and the&nbsp;for&nbsp;loop in our template. \u26a0\ufe0f FIRST ALERT:&nbsp;the new control&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/24792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/200"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=24792"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/24792\/revisions"}],"predecessor-version":[{"id":24891,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/24792\/revisions\/24891"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/24889"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=24792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=24792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=24792"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=24792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}