The latest articles on DEV Community by Dionis Dimcea (@dionisd). https://dev.to/dionisd https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1205238%2F2cd45fa4-aa01-4f54-b435-64a8c3048059.png https://dev.to/dionisd en Dionis Dimcea Wed, 08 Nov 2023 17:47:47 +0000 https://dev.to/dionisd/angular-switch-3754 https://dev.to/dionisd/angular-switch-3754 <h2> Angular has released the new '@switch' block syntax similar to Javascript </h2> <p><em>How does this work?</em><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--OpwbWYzJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w9429iezeav3wy0dft8.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OpwbWYzJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w9429iezeav3wy0dft8.png" alt="Angular ngSwitch Alternative" width="426" height="388"></a></p> <ul> <li><p>The <code>@switch</code> blocks displays content selected by one of the cases matching against the conditional expression</p></li> <li><p>The <code>@default</code> block is optional and can be omitted. If no <code>@case</code> matches the expression and there is no <code>@default</code> block, nothing is shown</p></li> <li><p><code>@switch</code> does not have fallthrough, so you do not need an equivalent to a break or return statement.</p></li> </ul> <p><a href="https://angular.dev/api/core/@switch">Angular docs</a></p> angular angular17 typescript ngswitch Dionis Dimcea Wed, 08 Nov 2023 17:30:28 +0000 https://dev.to/dionisd/angular-for-ad4 https://dev.to/dionisd/angular-for-ad4 <h2> Angular has released the new '@IF' block syntax similar to Javascript </h2> <p>How does this work?<br> <code>@For</code></p> <blockquote> <p>Similar to JavaScript’s <code>for...of</code> loops, Angular provides the <code>@for</code> block for rendering repeated elements.</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Rds34bPl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83z6h7jo5xpzimgrux0y.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Rds34bPl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83z6h7jo5xpzimgrux0y.png" alt="Angular ngFor Alternative" width="439" height="238"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--T43y6IM7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjnxpf0ynr9afo1ievmr.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--T43y6IM7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjnxpf0ynr9afo1ievmr.png" alt="Angular ngFor Alternative" width="549" height="101"></a></p> <p>You might've noticed that there's additional <code>track</code> keyword.<br> <code>track</code> property</p> <p><em>Why?</em> </p> <blockquote> <p>Angular needs to track each element through any reordering, usually by treating a property of the item as a unique identifier or key (Items can later change or move).</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1pOjgRZF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtqfszith5uwr06udvx8.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1pOjgRZF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtqfszith5uwr06udvx8.png" alt="Angular ngFor Alternative" width="524" height="52"></a></p> <p><a href="https://angular.dev/essentials/conditionals-and-loops">Angular docs</a></p> angular angular17 typescript Dionis Dimcea Wed, 08 Nov 2023 17:04:20 +0000 https://dev.to/dionisd/angular-if-50h1 https://dev.to/dionisd/angular-if-50h1 <h2> Angular has released the new '@if' block syntax inspired by Javascript </h2> <p><em>How does this work?</em></p> <p><code>@if</code></p> <blockquote> <p>Similar to JavaScript's if statement, Angular uses <code>@if</code> to conditionally hide and show part of a template and its contents</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8j9XGQmd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5duqas69hiou74nkdyam.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8j9XGQmd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5duqas69hiou74nkdyam.png" alt="Angular ngIf alternative" width="326" height="236"></a><br> <code>@else</code></p> <blockquote> <p>When you need a fallback, similar to JavaScript's <code>else</code> clause, add an <code>@else</code> block to accomplish the same effect</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--CHhk_sK7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3tyrysiuf2jexdvdmun.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--CHhk_sK7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3tyrysiuf2jexdvdmun.png" alt="Angular ngIf else alternative" width="331" height="271"></a></p> <p><a href="https://angular.dev/essentials/conditionals-and-loops">Angular docs</a></p> angular angular17 typesccript