Angular - How to work with value 0 in @if template flow syntax

Question

I have a problem with @if in the Angular template flow syntax.

A value is available in an RxJs Observable. So the async pipe helps and the value is assigned to a variable.

@if (currentPageNumber$ | async; as currentPageNumber) {
// currentPageNumber is number

For value 0 the if statement is not valid. So I exclude only null values... but now the value of currentPageNumber is boolean.

@if ((currentPageNumber$ | async) !== null; as currentPageNumber) {
// currentPageNumber is boolean

How can I check against null but keep my variable with the value of the stream?

Answer 1

You can wrap the value directly in the template, this is probably the most straight forward way knowing how the AsyncPipe works.

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe],
  template: `
    @if({value: (sub$ | async)}; as wrappedValue) {
      foo {{wrappedValue.value}}
    } @else {
      bar
    }
  `,
})
export class App {
  sub$ = new BehaviorSubject(0);
}