{"id":1379,"date":"2024-12-15T00:00:00","date_gmt":"2024-12-14T23:00:00","guid":{"rendered":"https:\/\/demo.sidekick.be\/itenium\/angular-new-template-syntax\/"},"modified":"2025-11-28T13:31:41","modified_gmt":"2025-11-28T12:31:41","slug":"angular-new-template-syntax","status":"publish","type":"post","link":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/","title":{"rendered":"The new Angular template syntax"},"content":{"rendered":"<h1 id=\"if\">@if<\/h1>\n<h2 id=\"old-syntax\">Old Syntax<\/h2>\n<p>Need to import <code>NgIf<\/code> from <code>@angular\/common<\/code>.<\/p>\n<pre><code class=\"language-html\">&lt;span *ngIf=\"boolVar; else boolFalse\"&gt;\n  TRUE\n&lt;\/span&gt;\n&lt;ng-template #boolFalse&gt;\n  FALSE\n&lt;\/ng-template&gt;\n<\/code><\/pre>\n<h2 id=\"new-syntax\">New Syntax<\/h2>\n<pre><code class=\"language-html\">@if(boolVar) {\n  TRUE\n} @else {\n  FALSE\n}\n<\/code><\/pre>\n<h1 id=\"for\">@for<\/h1>\n<h2 id=\"old-syntax-1\">Old Syntax<\/h2>\n<p>Need to import <code>NgFor<\/code> from <code>@angular\/common<\/code>.<\/p>\n<pre><code class=\"language-html\">&lt;span *ngFor=\"let el of elements; index as i; first as isFirst\"&gt;\n  {{ i }}: {{ el.desc }} (first={{isFirst}})\n&lt;\/span&gt;\n<\/code><\/pre>\n<p>Available \u201cspecial\u201d variables:<\/p>\n<ul>\n<li>index &amp; count<\/li>\n<li>odd &amp; even<\/li>\n<li>first &amp; last<\/li>\n<\/ul>\n<p>Adding <code>trackBy: trackElFn<\/code> is optional and is only needed when you are running into performance issues.<\/p>\n<pre><code class=\"language-ts\">trackElFn(index: number, el: T) {\n  return el.id;\n}\n<\/code><\/pre>\n<h2 id=\"new-syntax-1\">New Syntax<\/h2>\n<p>The track is mandatory in the new syntax.<\/p>\n<pre><code class=\"language-html\">@for(el of elements; track el.id; let i = $index; let isFirst = $first) {\n  {{ i }}: {{ el.desc }} (first={{isFirst}})\n}\n<\/code><\/pre>\n<h1 id=\"switch\">@switch<\/h1>\n<h2 id=\"old-syntax-2\">Old Syntax<\/h2>\n<p>Need to import <code>NgSwitch<\/code>, <code>NgSwitchCase<\/code> and <code>NgSwitchDefault<\/code> from <code>@angular\/common<\/code>.<\/p>\n<pre><code class=\"language-html\">&lt;div [ngSwitch]=\"aNumber\"&gt;\n  &lt;span *ngSwitchCase=\"1\"&gt;ONE&lt;\/span&gt;\n  &lt;span *ngSwitchCase=\"2\"&gt;TWO&lt;\/span&gt;\n  &lt;span *ngSwitchDefault&gt;OTHER&lt;\/span&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<h2 id=\"new-syntax-2\">New Syntax<\/h2>\n<pre><code class=\"language-html\">@switch(randomNumber) {\n  @case(1) {ONE}\n  @case(2) {TWO}\n  @default {OTHER}\n}\n<\/code><\/pre>\n<h1 id=\"let\">@let<\/h1>\n<h2 id=\"old-syntax-3\">Old Syntax<\/h2>\n<p>This was previously not possible out of the box but the same could be achieved with an <code>ngIf<\/code>:<\/p>\n<pre><code class=\"language-html\">&lt;span *ngIf=\"randomObs$ | async as randomNr\"&gt;\n  Nr = {{ randomNr }}\n&lt;\/span&gt;\n<\/code><\/pre>\n<h2 id=\"new-syntax-3\">New Syntax<\/h2>\n<p>Don\u2019t forget the ending <code>;<\/code>!<\/p>\n<pre><code class=\"language-html\">@let randomNr = randomObs$ | async;\nNr = {{ randomNr }}\n<\/code><\/pre>\n<h1>Extras<\/h1>\n<p><b>Stuff that came into being during the making of this post<\/b><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/itenium-be\/Angular-Days\">See src\/app\/new-template for side-by-side comparison<\/a><\/li>\n<\/ul>\n<h1> Package Versions <i class=\"fa fa-info-circle\" style=\"float: right; color: cornflowerblue; font-size: 28px\" title=\"Package versions used for this post and in the accompanying code on Github\"><\/i><\/h1>\n<div><a href=\"https:\/\/github.com\/angular\/angular\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/angular\/angular.svg?style=social&#038;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/angular\/angular\">angular\/angular<\/a>: v19 <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Compared to other SPA frameworks, Angular really made it quite cumbersome to do simple things like an if\/else to show\/hide certain UI parts.<\/p>\n<p>The new syntax is so much more succinct, it gets rid of excess html tags, is easier to remember and it doesn\u2019t need to be added to the <code>imports<\/code> array of a standalone component.<\/p>\n","protected":false},"author":1,"featured_media":1975,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[23,6],"class_list":["post-1379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-angular","tag-tutorial"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The new Angular template syntax - Itenium<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The new Angular template syntax - Itenium\" \/>\n<meta property=\"og:description\" content=\"Compared to other SPA frameworks, Angular really made it quite cumbersome to do simple things like an if\/else to show\/hide certain UI parts.The new syntax is so much more succinct, it gets rid of excess html tags, is easier to remember and it doesn\u2019t need to be added to the imports array of a standalone component.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/\" \/>\n<meta property=\"og:site_name\" content=\"Itenium\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-14T23:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-28T12:31:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/angular-template-syntax.png\" \/>\n\t<meta property=\"og:image:width\" content=\"360\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Usdevelop\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Usdevelop\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/\",\"name\":\"The new Angular template syntax - Itenium\",\"isPartOf\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/angular-template-syntax.png\",\"datePublished\":\"2024-12-14T23:00:00+00:00\",\"dateModified\":\"2025-11-28T12:31:41+00:00\",\"author\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022\"},\"breadcrumb\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/#primaryimage\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/angular-template-syntax.png\",\"contentUrl\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/angular-template-syntax.png\",\"width\":360,\"height\":300,\"caption\":\"template\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/demo.sidekick.be\/itenium\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The new Angular template syntax\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#website\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/\",\"name\":\"Itenium\",\"description\":\"We build software. We build careers.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/demo.sidekick.be\/itenium\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022\",\"name\":\"Usdevelop\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g\",\"caption\":\"Usdevelop\"},\"sameAs\":[\"https:\/\/demo.sidekick.be\/itenium\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The new Angular template syntax - Itenium","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"The new Angular template syntax - Itenium","og_description":"Compared to other SPA frameworks, Angular really made it quite cumbersome to do simple things like an if\/else to show\/hide certain UI parts.The new syntax is so much more succinct, it gets rid of excess html tags, is easier to remember and it doesn\u2019t need to be added to the imports array of a standalone component.","og_url":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/","og_site_name":"Itenium","article_published_time":"2024-12-14T23:00:00+00:00","article_modified_time":"2025-11-28T12:31:41+00:00","og_image":[{"width":360,"height":300,"url":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/angular-template-syntax.png","type":"image\/png"}],"author":"Usdevelop","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Usdevelop","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/","url":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/","name":"The new Angular template syntax - Itenium","isPartOf":{"@id":"https:\/\/demo.sidekick.be\/itenium\/#website"},"primaryImageOfPage":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/#primaryimage"},"image":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/#primaryimage"},"thumbnailUrl":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/angular-template-syntax.png","datePublished":"2024-12-14T23:00:00+00:00","dateModified":"2025-11-28T12:31:41+00:00","author":{"@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022"},"breadcrumb":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/#primaryimage","url":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/angular-template-syntax.png","contentUrl":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/angular-template-syntax.png","width":360,"height":300,"caption":"template"},{"@type":"BreadcrumbList","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular-new-template-syntax\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/demo.sidekick.be\/itenium\/"},{"@type":"ListItem","position":2,"name":"The new Angular template syntax"}]},{"@type":"WebSite","@id":"https:\/\/demo.sidekick.be\/itenium\/#website","url":"https:\/\/demo.sidekick.be\/itenium\/","name":"Itenium","description":"We build software. We build careers.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/demo.sidekick.be\/itenium\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022","name":"Usdevelop","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g","caption":"Usdevelop"},"sameAs":["https:\/\/demo.sidekick.be\/itenium"]}]}},"_links":{"self":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/comments?post=1379"}],"version-history":[{"count":2,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1379\/revisions"}],"predecessor-version":[{"id":2152,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1379\/revisions\/2152"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/media\/1975"}],"wp:attachment":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/media?parent=1379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/categories?post=1379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/tags?post=1379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}