0

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>
Tabares
  • 4,083
  • 5
  • 40
  • 47
  • 1
    Your question does not make sense right, only if the `*ngIf` is true you will go inside the ng-container, that is why they have not given an option for that, so isDataLoading will never be set if the `*ngIf` condition is false! – Naren Murali Sep 03 '22 at 08:22
  • you could name it `isDataReady` – Andrei Sep 03 '22 at 09:40
  • Just have a mapped observable: `isDataReady$: Observable;` and `this.isDataReady$ = this.isLoading$.pipe(map(isLoading => !IsLoading));` – Pieterjan Sep 03 '22 at 10:58

1 Answers1

2

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>
Vasileios Kagklis
  • 784
  • 1
  • 4
  • 14