Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Pass Observables into Components with Async Pipe

    John LindquistJohn Lindquist
    2 - 6
    5 - 6

    The components inside of your container components can easily accept Observables. You simply define your custom @Input then use the Async pipe when you pass the Observable in. This lesson walks you through the process of passing an Observable into a Component.



    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




    To make a component for our clock, let's go ahead and extract this. We'll basically come into source, create a new type script file, call it "Clock," and then just set up a basic component where we import component. We use the component decorator. Say the selector is going to be clock. And right now we'll say the template is just, "I'm a clock." Export the class of clock.

    Then we can use that clock inside of our app. We're going to comment that out and make sure I add that clock to my directives. Clock and make sure we import from clock. So clock. Finally I'll use my clock component. I want to hit save and I refresh. You can see a component that shows up that says, "Clock." It's just rendering out, "I'm a clock," from my I'm a clock template.

    To push the value of the clock, I'm actually going to rename this to time. I'll call this, "Time," because it's a value we want to push into our clock component. To expose an input on my clock, I'll say, "Input time." I also need to import input. I can render out the time in my template. Almost use an H3 this time and render out time. In my container, I can come in here and say, "I want to pass in the time."

    This time is my input and the brackets around it mean that it's an input you can pass a value into. I'll go ahead and assign that to time. I have to run it through the async pipe just as I did up above. Or else if I don't, what you'll see is when I refresh I'll just get this object again, which I got way back when.

    Now I'll just say async. Now it's just going to push the values in there asynchronously. You can see the time is still updating three seconds at a time. When I click and change that number, it still works just fine.

    Then lastly I'll just take this state filter. I'll cut this out. I'll come in and paste it inside my clock component. I can delete my commented out line. From now on my clock is completely componentized where this knows nothing about its asynchronous nature. All it knows is it takes in time input and that time is being pushed through asynchronously.

    Every time my observable, my stream pushes in new values, it's just going to come in and update this. My clock doesn't need to know anything about this streams or anything about RXJS. It's just accepting the value that's being pushed in, whereas my container can be the one that creates everything that's going to push the values in.

    When I save, we'll see this time that the date filter or the date pipe is being applied, and everything still works just as before.