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 NgIf, NgFor, and NgSwitch, you'll be able to use the new @ syntax.

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. ng-container.

As an example, let's take a look at my if-else condition and compare both solutions.

 content_paste
@if (ifCondition) {
    <div>If template</div>
} @else if (elseIfCondition) {
    <div>Else-if Template</div>
} @else {
    <div>Else Template</div>
}

 content_paste
<ng-container *ngIf="ifCondition; else elseIfTemplate">
  <div>If template</div>
</ng-container>
 
<ng-template #elseIfTemplate>
  <ng-container *ngIf="elseIfCondition; else elseTemplate">
    <div>Else-if Template</div>
  </ng-container>
</ng-template>
 
<ng-template #elseTemplate>
  <div>Else Template</div>
</ng-template>

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 (*ngSwitch).

 content_paste
@for (todo of todos; track todo.id) {
    <li>{{ todo.description }}</li>
} @empty {
    <li>Congratulations! You've conquered your to-do list.</li>
}

 content_paste
@switch (card.kind) {
    @case ('summary') {
        <app-summary-card [card]="card" />
    } @case ('image') {
        <app-image-card [card]="card" />
    } @default {
        <app-simple-card [card]="card" />
    }
}

To already try out the new Control Flow feature before it's officialy released, update the angular compiler options within the TypeScript configuration file. Add the _enabledBlockTypes property, and add the blocks you want to use within your application.

 tsconfig.json content_paste
{
  "angularCompilerOptions": {
    "_enabledBlockTypes": ["if", "switch", "for", "defer"]
  }
}

For more information see the Angular blog post Meet Angular’s New Control Flow.

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Share this bit on