Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Bind data to NativeScript Angular components using RxJS Observables

1:06 Angular 2 lesson by

Learn how to use standard RxJS Observables for your native view bindings using the power of Angular’s async pipe.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Learn how to use standard RxJS Observables for your native view bindings using the power of Angular’s async pipe.

Because we have the power of Angular at our fingertips, we can also bind two observables. Let's import from RxJS. We'll use the behavior subject. Let's convert our items to be a behavior subject.

Let's actually use the items to set this up. We're going to reference these here, and we're going to convert this to a behavior subject to be typed as an array of any type of object. We'll instantiate it, and we'll initialize it to an empty array.

Then to demonstrate, we'll set up a counter that will just fire off an interval every second. We'll take our behavior subject and we're going to emit out a new array each time using an immutable data structure pattern.

We're going to grab the latest value of what's in our observable, and then we're going to append the latest item that's in our account. Then we'll just increment the counter. For good measure, only if count is less than four, otherwise we'll just kill the tie run.

Now, let's bind to our items observable using Angular's Asynch pipe. We can see our list view now is just reacting to the changes on that observable automatically.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?