Angular Control Flow
The past week I cursed Angular a little bit because I just wanted to have a simple
if-else condition within my HTML template.
But, as you probably already know, we have to jump through a couple of hoops to get this working.
The result is a not-so-easy-to-read template that's prone to errors.
Angular 17 changes that by providing a new (opt-in) way on how we write our templates.
Instead of using the structural directives
NgSwitch, you'll be able to use the new
This change drastically improves the Developer's Experience;
- it's easier to read
- you don't have to import the directives
- it's less verbose since you don't have to create wrapper components e.g.
As an example, let's take a look at my
if-else condition and compare both solutions.
For completeness let's also take a look at the new syntaxes to iterate over a collection (
*ngFor) and how to create a switch expression (
To already try out the new Control Flow feature before it's officialy released, update the angular compiler options within the TypeScript configuration file.
_enabledBlockTypes property, and add the blocks you want to use within your application.
For more information see the Angular blog post Meet Angular’s New Control Flow.
I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.