Autoplay

    Bind data to NativeScript Angular components using RxJS Observables

    Nathan WalkerNathan Walker

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss