Angular: How to reference the result of a function in the new control flow @if with an logical AND (&&)

Question

With the old control flow I could reference the result of a function in this way.

<span *ngIf="column.getValue && column.getValue(item) as value">{{value}}</span>

But when I use the new control flow (@if) it throws the error Parser Error: Unexpected token 'as'

@if (column.getValue && column.getValue(item) as value) {
<span>{{value}}</span>
}

I've already tried the following, but to no avail

@if (column.getValue && (column.getValue(item) as value))

It seems to me that it should be possible, but I can't find how.

FYI: column.getValue is an optional function, that's why I'm checking if it exists before executing it.

Answer 1

Control flow syntax also allows to alias condition result, you need to use ;:

@if (column.getValue && column.getValue(item); as value)

You unnecessarily put another curly brackets. This is an alias for the whole condition, which works as follows:

• if column.getValue is null, return false
• if column.getValue is not null return result of column.getValue(item)

You can read more here

FYI: if getValue is optional, you can use optional chaining here:

@if (column.getValue?.(item); as value)