How to set two Async Pipe functions in Angular 7?

Question

I have 2 functions that checks a specific condition, I would both like both of them to be true. How would you use *ngIf in this case? Currently if I set one of them it works, but I need both of them.

HTML

<p *ngIf="(isFree$ | async) && (order$ | async)">Free Plan</p>

TS

public order(data) {
    const order = data.externalOrderId;
    if (order.substring(0, 4) === 'asdad') {
      return true;
    } else {
      return false;
    }
  }


 public isFree$ = this.planType$.pipe(
    map((data) => {
      return (data.plan === 'Free');
    }
));

No I saw this; so I need but conditions to be True...how can I use and in ngIf — , Jan 09 '20 at 17:52
Merge the observables and use the `map` operator to marshall them into a boolean value. — The Head Rush, Jan 09 '20 at 17:58
It really depends on the observables you are combining. You should probably check out https://www.learnrxjs.io/operators/combination/ and see which operator best fits your use case. — The Head Rush, Jan 09 '20 at 18:05
@PrashantPimpale please remove the duplicate question. This is a different question — , Jan 09 '20 at 18:23

score 0 · Answer 1 · answered Jan 09 '20 at 17:57

0

Create a new dumb component that has (2) Inputs: [isFree], [order]
In your new component use an *ngIf statement to show the <p> if both Inputs are available.

answered Jan 09 '20 at 17:57

Flignats

1,234
10
21

What do you mean? – Jan 09 '20 at 18:08
The parent component should contain the observables and provide them as `input`s to a dumb component that has your `p`. Only show the `p` element if both inputs are defined – Flignats Jan 09 '20 at 19:23

score 0 · Answer 2 · answered Jan 09 '20 at 18:49

0

You can use rxjs forkJoin

It will wait until both the observables streams return the response. It returns single observable array of responses to which you can subscribe or use async pipe to resolve

HTML

<p *ngIf="resp$ | async">Free Plan</p>

TS

public isFree$ = this.planType$.pipe(
    map((data) => {
      return (data.plan === 'Free');
    }
));

public isOrder$ = of({resp:[]}) // stream 2

public resp$ = forkJoin(this.isFree$, this.isOrder$)

Fork join example with ngIf and async

answered Jan 09 '20 at 18:49

Amit Chigadani

28,482
13
80
98

it seems that forkjoin has been deprecated? – Jan 10 '20 at 20:05
@user12684453 In which version it's deprecated? I didn't think so. – Amit Chigadani Jan 10 '20 at 23:33
it has been deprecated in rxjs – Jan 16 '20 at 18:10
No it is not. I have already provided you the link to tutorial example. Here is the link to official docs https://rxjs.dev/api/index/function/forkJoin – Amit Chigadani Jan 16 '20 at 18:27

How to set two Async Pipe functions in Angular 7?

2 Answers2