From baca12c76b0ee9873efda8c45647fcb2f570012d Mon Sep 17 00:00:00 2001 From: cexbrayat Date: Thu, 12 Oct 2023 11:59:22 +0200 Subject: [PATCH] post: update control flow with latest changes --- .../2023-10-11-angular-control-flow-syntax.md | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/_posts/2023-10-11-angular-control-flow-syntax.md b/_posts/2023-10-11-angular-control-flow-syntax.md index d17cfee..b9ec815 100644 --- a/_posts/2023-10-11-angular-control-flow-syntax.md +++ b/_posts/2023-10-11-angular-control-flow-syntax.md @@ -343,6 +343,13 @@ but you still can if you need to, for example when using nested loops. {% endraw %} +It is also worth noting that the control flow `@for` uses +a new algorithm under the hood to update the DOM when the collection changes. +It should be quite a bit faster than the algorithm used by `*ngFor`, +as it does not allocate intermediate maps in most cases! +Combined with the required `trackBy` property, +`for` loops should be way faster in Angular applications by default. + ## Switch statement This is probably where the new type-checking shines the most, @@ -362,16 +369,23 @@ as using an impossible value in a case will now throw a compilation error! Note that the switch statement does not support fall-through, so you can't have several cases grouped together. +It also does not check if all cases are covered, +so you won't get a compilation error if you forget a case. +(but I hope it will, add a 👍 on [this issue](https://github.com/angular/angular/issues/52107) if you want this as well!). It's also noteworthy that the `@switch` statement uses strict equality (`===`) to compare values, whereas `*ngSwitch` used to use loose equality (`==`). Angular v17 introduced a breaking change, and `*ngSwitch` now uses strict equality too, -with a warning in the console during development if you use loose equality. +with a warning in the console during development if you use loose equality: + + NG02001: As of Angular v17 the NgSwitch directive uses strict equality comparison === instead of == to match different cases. Previously the case value "1" matched switch expression value "'1'", but this is no longer the case with the stricter equality check.Your comparison results return different results using === vs. == and you should adjust your ngSwitch expression and / or values to conform with the strict equality requirements. + ## The future of templating 🚀 The control flow syntax is a new experimental feature introduced in Angular v17, -and will probably be the recommended way to write templates in the future. +and will probably be the recommended way to write templates in the future +(the plan is to make it stable in v18 once it has been battle-tested). It doesn't mean that structural directives will be deprecated, but the Angular team will likely focus on the control flow syntax in the future @@ -379,7 +393,14 @@ and push them forward as the recommended solution. We will even have an automated migration to convert structural directives to control flow statements in existing applications. -Angular v17 has a first migration to convert `@`, `{` and `}` characters used in your templates -to their HTML entities. +The migration is available in Angular v17 as a developer preview. +If you want to give it a try, run: + + ng g @angular/core:control-flow + +This automatically migrates all your templates to the new syntax! +Angular v17 has a first mandatory migration to convert `@`, `{` and `}` characters used in your templates to their HTML entities. + +The future of Angular is exciting! All our materials ([ebook](https://books.ninja-squad.com/angular), [online training](https://angular-exercises.ninja-squad.com/) and [training](https://ninja-squad.com/training/angular)) are up-to-date with these changes if you want to learn more!