Angular 17 recently came out with several exciting updates. One notable addition is the Control Flow feature. This new feature simplifies template writing by introducing a direct way to handle control flow within the template itself. Now, there's no need to rely on directives like *ngIf, *ngFor, and *ngSwitch for control flow as this new syntax streamlines the process.
This post will demonstrate a basic project using a new control flow method, moving away from the traditional directive-based approach. You can go through my other Angular post here.Let's begin right away!
Angular Project Setup
Before we start using the new feature, let's make sure you have an Angular project set up and ready to go. If you haven't done so yet, create a new Angular project using these commands with the Angular CLI:
npm install -g @angular/cli@latest ng new ng17-control-flows
This command creates a fresh Angular project, including all the essential files and dependencies with the latest version.
Once it's set up, open the app.component.html file and remove the default Angular code. Let's add a basic HTML structure to it instead.
<h1>NG -17 :New Control Flows</h1>
Conditionally rendered control blocks: @if and @else
Let’s start with the replacement of *ngIf.
In the first example, I create a checkbox and bind it to the isChecked property.Starting with a default value of true, the checkbox appears checked, displaying the content within the @if block.The examples below are from the app.component.html template file:
