Pass Observables into Components with Async Pipe
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.
[00:00] 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.
[00:32] 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.
[01:03] 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."
[01:38] 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.
[01:58] 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.
[02:12] 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.
[02:37] 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.
[02:58] 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.