Angular - Bind template to variable?

Question

Let's say you have an *ngFor loop and you want to save a value of the current loop away into a variable in typescript. Is there a good way to do this?

Example

<tr *ngFor="let item of items | async">
    <td>{{item.one}}</td>
    <td>{{item.two}}</td>         <-- I want to save this one away -->
    <td>{{item.three}}</td>
</tr>

Typescript

this.itemCollection = this.afs.collection(CollectionIntf);
this.items= this.itemCollection.valueChanges();

So far I've been using using <iframe (load)=saveIntoVar(item.two)></iframe>. There's got to be a better way of doing this, since this iframe method doesn't always seem to work.

Answer 1

There are a few good ways of getting values from an async subscription in your component controller. One is to just subscribe in the controller and assign the variable. One is to use a separate subscription in the controller, but my favorite is to just use the "do" operator:

in component:

this.items = this.itemCollection.valueChanges().do(items => console.log(items));

then you can produce whatever side effect you deem appropriate.