Introducing Angular’s New Control Flow
With version 17, Angular is introducing a new Control Flow for your applications. You will no longer need to import CommonModule or (if using Standalone components, which will be enabled by default on v17) NgIf, NgFor , or NgSwitch in your apps to be able to use conditionals and loops in your templates. Also, we get the benefit of deferred templates (which are parts of your templates that can be lazy loaded.
After some discussion during the RFC process for this new Control Flow syntax, the Angular team decided (based on community feedback) to go with the @-syntax (as they call it). You can read more about this decision here.
But what would be a blog post of new Angular features without some code, so let’s dive into an example!
Hands on!
Let’s create a new application and see how we can use this new control flow. Start by running the following command on terminal:Now that we have some logic in our component, we can start working with the template, where we’re going to use the new control flow syntax.
As we want to show a list of names in our component, we are going to use the new @for syntax and as the user is going to enable/disable adding names, we’ll use the new @if syntax for when to show it or notLet’s run the app to see it working!
0 Comments