Angular - Combine two observables in one ngIf

Question

I have a stepper which is conditioned by a single observable

<ng-container *ngIf="!(categoriesLoading$ | async); else loading">
  <mat-vertical-stepper *ngIf="categories$ | async as categories">
    <mat-step>
      <categories-form [categories]="categories"></categories-form>
    </mat-step>
  </mat-vertical-stepper>
</ng-container>

now I would like to add the conditioning of another observable qualifications$

Something like that:

<ng-container *ngIf="!(categoriesLoading$ | async); else loading">
  <mat-vertical-stepper *ngIf="categories$ | async as categories">
    <mat-step>
      <categories-form [categories]="categories"></categories-form>
    </mat-step>
    <mat-step>
      <qualifications-form [qualifications]="qualifications"></qualifications-form>
    </mat-step>
  </mat-vertical-stepper>
</ng-container>

in the controller:

categories$: Observable<Array<Category>>;
categoriesLoading$: Observable<boolean>;
qualifications$: Observable<Array<Qualification>>;
qualificationsLoading$: Observable<boolean>;

how can I do this properly?

something like this? - I'm not quite sure what you mean: *ngIf="!(categoriesLoading$ | async) && (qualificationsLoading$ | async); else loading" Are you looking to extend the condition on line 1? or extending the for loop of line 2? (2nd example) — Jonas Praem
– Jonas Praem, Commented Feb 26, 2019 at 9:42
@JonasPraem I would like to have the same result of the first example by adding qualifications$ observable — Mouad Ennaciri
– Mouad Ennaciri, Commented Feb 26, 2019 at 9:47
I would rethink the design of that.. you might run into race conditions. I would chain those observables with .pipe(), then wait for the final one to resolve and act upon that final result, not on 2 at the same time. — chriszichrisz
– chriszichrisz, Commented Feb 26, 2019 at 9:53

Rauks · Accepted Answer · 2019-02-26 12:45:17Z

You can have a look at the Rxjs zip combination operator which might help you.

https://www.learnrxjs.io/operators/combination/zip.html

https://rxmarbles.com/#zip

In your controller, you can create a new observable like:

combined$: Observable<{ categories: Array<Category>, qualifications: Array<Qualification>}> = zip(
    this.categories$,
    this.qualifications$,
    (categories: Array<Category>, qualifications:Array<Qualification>) => { 
        return { categories, qualifications };
    }
);

Which will combine the emitted values, then you can use it to get the combined values:

<ng-container *ngIf="!(categoriesLoading$ | async); else loading">
  <mat-vertical-stepper *ngIf="combined$ | async as combined">
    <mat-step>
      <categories-form [categories]="combined.categories"></categories-form>
    </mat-step>
    <mat-step>
      <qualifications-form [qualifications]="combined.qualifications"></qualifications-form>
    </mat-step>
  </mat-vertical-stepper>
</ng-container>

Also you can use zip to have your loading observables wait for each other:

combinedLoading$: Observable<boolean> = zip(
    this.categoriesLoading$,
    this.qualificationsLoading$,
    (categoriesLoading: boolean, qualificationsLoading: boolean) => { 
        return categoriesLoading && qualificationsLoading;
    }
);

I have this error: Type 'OperatorFunction<boolean, boolean>' is missing the following properties from type 'Observable<boolean>': _isScalar, source, operator, lift, and 6 more. where do you come from?

Collectives™ on Stack Overflow

Angular - Combine two observables in one ngIf

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related