How to declare new variable names in Angular 17 templates?

Question

In all Angular versions < 17 it was possible to declare new variable names, or better: create variable aliases in the templates, like this simplfied example:

<ng-container *ngIf="objectlist$ | async as list">
    {{ list.name }}
</ng-container>

Now Angular 17 has introduced the new @if syntax (what I really like). So I would convert the snippet like this:

@if (objectlist$ | async as list) {
    {{ list.name }}
}

However this is not working because as list doesn't work with the new syntax scheme. But how can I achieve the logic from my initial script same with the new syntax?

Answer 1

Alias is still supported on @if in the control flow syntax if you add a semi colon (;) after the async pipe:

@if (objectlist$ | async; as list) {
    {{ list.name }}
}

However, alias is not supported on @if with @else in the control flow syntax. @if is supported just for backwards compatibility. See this Issue on the Angular GitHub repository: Allow to alias the @else if blocks in control flow syntax #52103.

The relevant parts are:

We were discussing this some time ago, but decided not to support it, because the alias is there only for backwards compatibility with ngIf.

and

We discussed this particular point extensively during the design of control flow, and decided against expanding support for as. In particular @if in signal components will not support it at all, because it's incompatible with signal data flow.

as is effectively a local variable declaration, similar to let inner = outer.expression;. If you imagine the outer expression reads signals, then the inner expression is caching the resulting value in order to use it in a child template. This "loses reactivity" - the child template would never update because it isn't doing the signal reads itself. Instead, computed signals solve this problem in a much more canonical way.