This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Data Binding and Component Review" Lesson
[00:00:00]
>> Lukas Ruebbelke: Let's talk about inputs and outputs just real quick, just wanna do a quick review. So tell me what event binding does.
>> Speaker 2: Well, I believe the event binding is when we're doing the whole click events, right? And then that is routing to the class. So it was, I think we said it was the whole select equals is in the parentheses and then it had whatever's being set to the class, right?
[00:00:23]
>> Lukas Ruebbelke: Right. So what it allows you to do is, we're talking about a DOM Event, but it allows you to essentially communicate some event from the template to the component class. So when something happens we do not wanna handle this in the template obviously, we need to pass it along to an imperative context.
[00:00:49] And so what does property binding do?
>> Speaker 2: Passes change in state down to the template.
>> Lukas Ruebbelke: Yes. So state or basic communication information to the template from the component class. And as it changes, then the template will also be updated, as we saw, when we did that single input into the list of items and as that changed ,then it updated across all the items.
[00:01:26]
>> Lukas Ruebbelke: So the next question is,
>> Lukas Ruebbelke: Let's parallel this and just extend this, cuz honestly, this is what I really I'm hoping I'm communicating here. Is that event binding, property binding, is really the core, I mean we're just looking at a variation of this, when we talk about outputs and inputs.
[00:01:49] That we essentially have the ability to define our own events and our properties. So, let's do output.
>> Lukas Ruebbelke: How does this work?
>> Lukas Ruebbelke: You can do it. You, I know it. Give it to me. Come on, come on, come on, come on.
>> Speaker 3: It's a custom event. So it'd work the same way as a
[00:02:19]
>> Speaker 3: As a standard event.
>> Lukas Ruebbelke: Exactly, nailed it, so it is essentially a custom event that originates from the child component up to the parent component. And then an input is just essentially a custom way to pass data into a sub-component. Yes.
>> Speaker 3: Chris had a question awhile back about use case.
[00:02:47] It says, 'I'm subscribing to some observable in the parent component. Once I get that value, I want to pass to the child via input. That child component will wait for the input before executing on Init, and then, so what's the way to do that now?
>> Lukas Ruebbelke: So what I would recommend in this case, if I'm reading this correctly, Chris, is initially you have like an observable, and when you get the event or the value from that observable, you wanna pass that into the child.
[00:03:22] So what you can do is, first and foremost, I would stop and wonder or I would ask, can I pass this observable directly to my child? So in some cases, and this is again, we'll talk about this more tomorrow in reactive angular, is that you'll get an observable from let's say a service that goes into your parent component, and because you do not need to process it, you can just push it right into the child component.
[00:03:55] Not only that, is using the Async Pipe, you can actually bind to it, and essentially bind directly to the observable, and your child component will unwrap it for you. So first and foremost, I would say, do I need to use this in my parent component? If not, I would just pass it to the child component and just let it render.
[00:04:23] Secondly is, if you need to unpack it, you'll do that in the subscribe block of the observable. So let's say, on your parent ngOnInit, you're saying hey, go get me this thing.subscribe. When it comes back, then you just set that property and it will initialize or really set that value for you.
[00:04:44] But that's why you do not put initialization logic in a constructor for this reason, because now we have this asynchronous kind of time gap, where you're waiting for this observable to essentially resolve or to basically emit it's first value. That is bound to an input on a child component.
[00:05:05] And so Angular's pretty good about figuring that out. So if I do not need any of that data in the parent component, I would just pass that observable right to the child component, or I would just use .subscribe. And from there, you know take my final input and set it to a property on the component and pass that into the child input.
[00:05:26] And, it should just work. Analyze angular are pretty smart about that. And so based on the information I have, I think I have sufficiently answered that question. But if I have not, Chris, feel free to chime in and clarify. All right. So, we now have, good? All right.
[00:05:52] So we have here, albeit, and Hans is absolutely correct, that if we had less CSS, this would be easier to work with. I blame them, naming conventions for my super verbose CSS styling. But we have a master detail view that is at least rendering. So we've got the master list and we've got the detail list.
[00:06:20] Now the piece that is missing currently, is the fact that we have no way to actually modify or interact with the selected widget. And so this is where forms come in. So let's hop into the forms module and let's see what fortunes shall befall us.