How to negate an observable an set an alias in async pipe without losing the meaning?

Question

I have a flag in order to show the data that is using an angular class property, and the value is assigned throug a subscription in observable, but I want to update the approach using async pipe and an alias, the problem is that the validation requires to be false in order to be ready to show, this way I have to update the values in the input in order to render as expected. I don't want to set the not operator to validate the response. What is the right form to provide an alias, avoiding the not operator from validate scenario when I have a multiples places that are using the alias?

Old approach with class property

    <app-navigation [isLoading]="!isDataLoading"><app-navigation>
    <app-list [isLoading]="!isDataLoading"><app-list>
    <app-spinner [isLoading]="isDataLoading"><app-spinner>

New approach with async pipe, I don't want to modify the input property, but the alias is opposite when the validation is happening in the ng container

<ng-container *ngIf="(isDataLoading$ | async) === false as isDataLoading">
    <app-navigation [isLoading]="isDataLoading"><app-navigation>
    <app-list [isLoading]="isDataLoading"><app-list>
    <app-spinner [isLoading]="!isDataLoading"><app-spinner>
</ng-container>

Answer 1

There's no need to negate the observable.

If I understood correctly, you're trying to assign the result of async pipe to a variable without the effect of *ngIf. But, as of now (Angular v14), there is no official solution to this.

So you have to use a workaround. You could:

1. either create a custom directive
2. or use a workaround like in the following snippet of code:

<ng-container *ngIf="{ isLoading: (isDataLoading$ | async) } as data">
    <app-navigation [isLoading]="!data.isLoading"><app-navigation>
    <app-list [isLoading]="!data.isLoading"><app-list>
    <app-spinner [isLoading]="data.isLoading"><app-spinner>
</ng-container>