Bind data to NativeScript Angular components using RxJS Observables

Nathan Walker
InstructorNathan Walker

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 4 years ago

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

[00:00] 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.

[00:12] 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.

[00:26] 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.

[00:40] 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.

[00:56] 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.