Angular Control flow 🎮

A new modern way of writing ifs, if-else, switch-cases, and even loops in Angular templates!

Angular 17 is around the corner with a brand new template feature named control flow. The control flow is a new way of writing if statements, if/else statements, switch/case statements and for loops.

Additionally, Angular 17 will introduce “Deferable Views,” an exciting feature which we will cover in another blog post. Subscribe to my blog to not miss it!

Let’s dive into the future of Angular and explore how we’ll be crafting our if/else, switch/case, and for loops. We’ll begin with the straightforward yet fundamental example: the humble if condition.

if conditions

Up until now, Angular has allowed us to create simple if statements with the usage of the NgIf directive.

<div *ngIf="condition">Content</div>

To compile this code, we had to add the NgIf directive to our components imports array. The complete component code would look like this.

@Component({
  standalone: true,
  template: `<div *ngIf="condition">Content</div>`,
  imports: [NgIf]
})
export class MyComponent {}