Accessing result of async pipe in template from component code in Angular 2

Question

In Angular 2 I have a component with a template.

In the component TypeScript code i create a Reactive Extensions Observable (items$) and use it in an ngFor-directive in the template with an async-pipe.

This way I do not have to worry about subscribing and unsubscribing myself.

<div *ngFor="let item of items$ | async"></div>
...
</div>

Now from the component code I would like to access the list of items, but without subscribing to it. Is there a way from the template to hand back a copy of or reference to the items list?

I think now it not possible that... you will have to make a subscriptions on the .ts and store the result in a variable... — Llorenç Pujol Ferriol
– Llorenç Pujol Ferriol, Commented Sep 12, 2017 at 14:35

Pizzicato · Accepted Answer · 2019-07-30 10:00:04Z

11

You could just do this in the component:

items$.pipe(tap(items => this.items = items);

This way, you don't subscribe to the stream, and can keep using async pipe, but if a new value is emitted it will be saved in items variable.

edited Jul 30, 2019 at 10:00

answered Jul 25, 2019 at 10:30

Pizzicato

1,6701 gold badge19 silver badges38 bronze badges

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

Comments

martin · Accepted Answer · 2017-09-12 12:01:48Z

1

Since Angular 4+ you can use special syntax with as (works for *ngIf as well):

<div *ngFor="let item of items$ | async as items"></div>
  {{ items.length }} ...
</div>

See the example here https://angular.io/api/common/NgForOf

answered Sep 12, 2017 at 12:01

martin

97.4k26 gold badges205 silver badges237 bronze badges

3 Comments

lox Over a year ago

Yes, but I would like a reference to the entire list of items, and would like to access it in the component code (ts-file)

martin Over a year ago

Then no, you'll need to make the subscription in the component.

Pizzicato Over a year ago

Actually you can: check this stackoverflow.com/a/57199847/651555

Collectives™ on Stack Overflow

Accessing result of async pipe in template from component code in Angular 2

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related