Async pipes should not be negated

Question

I migrated from TSLint to ESLint following the guide. Now, I get this error message :

Async pipes should not be negated. Use (observable | async) === (false | null | undefined) to check its value instead

And here is the given explanation :

Angular’s async pipes emit null initially, prior to the observable emitting any values, or the promise resolving. This can cause negations, like *ngIf=”!(myConditional | async)” to thrash the layout and cause expensive side-effects like firing off XHR requests for a component which should not be shown.

But I don't understand the proposed solution, particularly the bitwise OR : false | null | undefined. When I try to write (false | null | undefined) in a template, Angular seems to consider null and undefined as pipes (which seems legit) and throws an error message. Even outside of an html template, this bitwise OR just returns 0 so, what is the point ? I also tried false || null || undefined but it is actually equivalent to undefined

Did I miss something ? Or is the error message misleading ? How should I write it then ?

The best I have is this but it is pretty ugly :

(observable | async) === false || (observable | async) === undefined

Answer 1

As another way to compare the values from the observable, you can create your own pipes:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'isFalsy',
  pure: false,
})
export class IsFalsyPipe implements PipeTransform {
  transform(value: any): any {
    return value ? false : true;
  }
}

Import in your module and then compare it like this:

<div *ngIf="observable$ | async | isFalsy"></div>