Angular — New Control flow with a working example

If you are watching recent Angular works, you’d probably know the addition of new control flows with new syntax. The new control flow is planned for the Angular v17 release that would probably face the public in November 2023. More details on why @ is chosen can be found here.

In the Angular v17.0.0-next.6 release, the team has shipped the control flow changes which are not production-ready but we can play around with it.

Let's see what are the available control flows.

If else statement

In previous versions, NgIf is used to show DOM elements conditionally which is declarative but is not suitable for the new change detection strategy. The new @if block will resolve this problem and will work well with signal-based change detection.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  show = true;
  showAnotherIf = false;
}

@if (show) {
  <span>Inside if</span>
} @else if (showAnotherIf) {
  <span>Inside else if</span>
} @else {
  <span>Inside else</span>
}

For loop

The for loop allows you to render the given content based on the iterable object and it provides some useful context properties to work with. In addition, it provides a @empty block which will be rendered when no item is present in the given array.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  skills = ['javascript', 'html', 'css'];
}

<ul>
  @for (item of skills; track item; let i = $index, f = $first; let l = $last, ev = $even, o = $odd; let co = $count) {
    <li>{{item}}
      <ul>
        <li>Index - {{i}}</li>
        <li>Is First - {{f}}</li>
        <li>Is Last - {{l}}</li>
        <li>Is even - {{ev}}</li>
        <li>Is odd - {{o}}</li>
        <li>Count - {{co}}</li>
      </ul>
    </li>
  } @empty {
    <li>No item</li>
  }
</ul>

Switch case

The new switch case control flow can be used as follows. You can use @default block to mention the default content to be rendered when no case is matched.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  caseNo = 4;
}

@switch (caseNo) {
  @case (1) {
    <span>Rendering case 1</span>
  }
  @case (2) {
    <span>Rendering case 2</span>
  }
  @case (3) {
    <span>Rendering case 3</span>
  }
  @default {
    <span>Rendering default</span>
  }
}

How to enable the new control flow in the Angular v17.0.0-next.6?

Even though the changes are available on the package, you cannot directly use this now and will end up with the below error.

error NG5002: Invalid ICU message. Missing ‘}’ 
or 
error NG5002: Unexpected character “EOF”
(Do you have an unescaped “{“ in your template? 
Use “{{ ‘{‘ }}”) to escape it.)

To try the new control flows now you have to add the below config in the angularCompileroptions.

{
  "angularCompilerOptions": {
    ....
    "_enabledBlockTypes": [
      "if", "switch", "for"
    ]
  }
}

I got your mind's voice, yeah _enabledBlockTypes is an internal one that will be changed eventually. But for now, it will allow you to play around with the control flows.

You can find the full working sample here.

Feel free to let me know if you have any comments.