CODEWITHSUNDEEP
angularrxjsobservableangular2-templateangular2-pipe
lox
lox

Reputation: 1622

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

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?

Upvotes: 7

Views: 2781

Answers (2)

Pizzicato
Pizzicato

Reputation: 1621

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.

Upvotes: 11

martin
martin

Reputation: 96899

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

Upvotes: 1

Related Questions