Setting two observables in "If; else" condition (Angular 7+)

Question

I have a template that shows one thing if certain condition is true, and another thing if certain condition is false.

I have tried the ng-template, but it is not working:


<div *ngIf="conditionA$ | async; else elseBlock">A CAT</div>
<ng-template #elseBlock>
<div *ngIf="conditionB$ | async">A DOG</div> 
</ng-template>

I would like to setup a function that will set an "or" for two observables:

TS

public conditionA$ = this.billingService.conditionAA$;
public conditionB$ = this.billingService.conditionBB$;

 get combined$() {
    return combineLatest(
      this.conditionA$,
      this.conditionB$,
      (A, B) => (A || !(B)));
}

HTML

<div *ngIf="combined$ | async">something<div/>

this code gives me an error:

ERROR Error: InvalidPipeArgument: 'function (source) { return source.lift.call(Object(_observable_from__WEBPACK_IMPORTED_MODULE_2__["from"])([source].concat(observables)), new _observable_combineLatest__WEBPACK_IMPORTED_MODULE_1__"CombineLatestOperator"); }' for pipe 'AsyncPipe' at invalidPipeArgumentError

Tony · Accepted Answer · 2020-01-22 03:52:34Z

1

You can use iif operator like this

import { fromEvent, iif, of, interval, pipe } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

interval(1000)
  .pipe(
    mergeMap(v =>
      iif(
        () => !!(v % 2),
        of(v)
        // if not supplied defaults to EMPTY
      )
    )
    // output: 1,3,5...
  )
  .subscribe(console.log);

answered Jan 22, 2020 at 3:52

Tony

20.3k7 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting two observables in "If; else" condition (Angular 7+)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related