How to pass async in @Input Angular?

Question

I have input property [visitors]:

<app-visitor-component [visitors]="visitors"></app-visitor-component>

How replace [visitors]="visitors" on async like:

[visitors]="service.currentUser | async"

Why you just don't send it as Observable?

joka00
– joka00

2019-03-09 15:17:55 +00:00
Commented Mar 9, 2019 at 15:17 — joka00
– joka00, Commented Mar 9, 2019 at 15:17

kklimczak · Accepted Answer · 2019-03-09 15:58:00Z

2

If your service is an Observable you need to use an Elvis operator:

[visitors]="(service | async)?.currentUser"

answered Mar 9, 2019 at 15:58

kklimczak

6334 silver badges10 bronze badges

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

2 Comments

POV Over a year ago

Thanks, but how to make filter based this notation? I mean when I typing text in input I need to filter (service.currentUser| async)

kklimczak Over a year ago

The first solution is a create method in a component and use a pipe on an observable with a map operator, second is a create filter pipe which maps your property as in the first solution. It's more convenient and friendly for change detection (search in the Google: pure pipes).

Sajeetharan · Accepted Answer · 2019-03-09 15:19:38Z

1

You could send it as Observable , if not use async as follows

<app-child [visitors]="(service.currentUser| async)">

answered Mar 9, 2019 at 15:19

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

2 Comments

POV Over a year ago

Thanks, but how to make filter based this notation? I mean when I typing text in input I need to filter (service.currentUser| async)

Patricio Vargas Over a year ago

@OPV you need to pass the observable, then in the child component you need to subcribe to it and filter the values

Arc_xXL · Accepted Answer · 2019-03-09 15:20:40Z

1

Make the variable you are passing an Observable or Subject<T> or BehaviourSubject<T>

eg.

// some service
public currentUser: Subject<string> = new Subject<string>();

then use like

[visitors]="service.currentUser | async"

answered Mar 9, 2019 at 15:20

Arc_xXL

84710 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to pass async in @Input Angular?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related