Properties, Events & Output

[00:00:00]
>> Let's talk about property binding. So we'll talk about event binding and property binding. These are two really important parts of angular components. Because here's the other thing, maybe what you want to do is have an attribute or a property on an element, and you want to have a dynamic value.

[00:00:20]
Okay? Okay, so I'll show you what I mean. So, we're property binding that is the magic of property binding. You can set values for properties of elements in your template. So let's say you want to dynamically set disabled or enabled based on something else in your component, like you wanna bind to that property, right.

[00:00:38]
Or you wanna set the the number of rows for a text area based on a number, for example, things like that, you got to wait it goes even further than that. So let's take the disabled and enable part for a template for a component. First thing you do is that you find that the property that you want to bind it to that you want to have it dynamic value and then you add square brackets right around there.

[00:01:04]
So on the disabled property of the button, so this is still HTML stuff, right. But now the brackets are what make it special. We got our brackets around it. And then that means whatever's on the right hand-side of the equal sign, we got Is disabled right here, that is going to link to guess where.

[00:01:23]
Look at that. Is disabled. So those values are now bound together. It gives you the power to programmatically adjust values in your template now on elements. But there's a sibling tool that you can You can use with property binding, which is event binding, okay. You get property binding and event binding.

[00:01:45]
Okay, let's do that. So, event binding enables you to respond to you like your events of your template. Let's say what's an event mouseover click custom events that we'll see even more you got all these options. Okay, so now let's say that we wanna, we have this template, this component, we got a button that says save progress, maybe there's some other stuff in the component.

[00:02:10]
Then, if I wanna handle it, okay fine, I take the name of the event. So if you were in the react world, you have your on something, something, something, that you're trying to like. Attach your function to. In Angular, we're just saying, what is the event name? The same thing that when you did document.addEventListener quote, remember that value that goes in that quote in the plain JavaScript?

[00:02:30]
When you add an event listener, it's that same value. Those same values are valid here, because they're just HTML events or JavaScript events for your thing. So, boom, you get a click. How do I identify that I'm binding to it though? Parentheses. How y'all doing? See that parentheses, okay.

[00:02:50]
And then on the right hand side, we have the function, but with parentheses. Okay. Okay, so you can't forget those parentheses there. That matters. Okay, and now, but what does that link to? Some value in our class. Awesome. Okay, before I go from there, how's that feel so far?

[00:03:15]
Feel pretty good? All right, I had to show you that, so I can show you this next part. So you need to understand the fact that you can bind to properties and bind to events, properties and events. Because remember I said a moment ago, if we were to break out that listing template into its own component, how would it know what data to display?

[00:03:37]
Cuz if all of our data lived in app.component or so earlier on, one of the questions was, what if you have data in another part of your application, but you want to share it with a component? Now we're gonna answer that question. So we're coming back to that.

[00:03:49]
So I said, give me a second. We're gonna get there. So how do you do that? So you use that with inputs. And I say that you can customize a component with an input. But you can also frame this as you can share data with the component, with an input.

[00:04:01]
But the reason I say customizing is because I like the idea of if you take a user profile or something, right. And you say, well, I wanna define what the data is for that user profile, you're kinda customizing it cuz it's no longer static. That's why I say customizing, but you could also say share data if that's more helpful to you.

[00:04:18]
If you are a person who's done like react, inputs in angular are just like props. Props are how you send in information to a component in React. Inputs are named for that same concept, okay. So here's what we have. So let's say we have our user card, which has some user information in it.

[00:04:40]
All right, and then we have our object which is of type user and has all this information. App user has an input called user data and it accepts a value of type user. If that just works, why do I need the square brackets, right? Why do I need the square brackets?

[00:05:05]
Let me tell you why. The square brackets make the right-hand side be an expression and not a string. Because without the brackets, it will be the string user. With the brackets Typescript and you're gonna say, wait, this is a like property or something. Let me look and see what the value is.

[00:05:27]
Let me actually get that instead. So those brackets can imbue it with more powers make it dynamic. But lets us understand how this works. See that user data, right. That's an input on app-user-card. And this user data is that actual data. So we're saying pass that in to this property name.

[00:05:48]
But then if we go to the user card, let's actually look look at what that does. So now I have this thing called it a decorator called @Input. So it takes a normal property that you normally would just be called user data of type user. But with the at input it allows the value to be set from where?

[00:06:09]
Outside the component. Whoa, hold on, I gotta cover my ears so my brain doesn't explode out, hold on. This is so good. Yeah, so, that's how we're able to accept values in there. And then we have our property, and we can still use that property normally in our template.

[00:06:29]
The same behavior that we've had so far. So nothing has changed. You know what the only thing that changed is? Where the data came from. But how we work with it, how we use it, remains the same. It's okay, if this feels a little abstract, a little confusing, because this is just a different way to do this.

[00:06:51]
All right, so if inputs are to get data into the component, what if you need to tell another part of your application that something happened in your component when they go the other way? Output, input is into the component output is out of the component. And the way you send data out of a component is through an event.

[00:07:10]
So we emit information so check this out. Let's say that we had a component with an output. So when something happens like addItemEvent all right, addItemEvent, someone's add an item in this component, we use this class called new EventEmitter. Now how can we tell what's going to come out, though?

[00:07:29]
What the event emitter what type of data comes out
>> A string,
>> A string, say TypeScript to the rescue. You don't have to guess. It's a string and then when we ready to do that event, here's how it works. We have a function that gets called at some point and then you do the event and you emit the event you say.

[00:07:53]
So whenever, whenever the additem function is called this adding function runs and it emits this event. And right now since a cute little turtle, because, you know, It's turtles all the way down like what's under the next turtle. It's turtles all the way down, baby. That's what that is.

[00:08:09]
All right, I wonder sorry, okay. All right, so I guess that's talking about for there, and actually, we'll look at it. So this is in the actual component that has the output what about where you're using the component? What about where you're using it? Well, we are binding to that event name.

[00:08:27]
How do you know what that name was? You saw that event name addItemEvent? That's that event name. And so that's what you bind to because it's an output. So I'm gonna bind to that event name. I'm going to handle the event, make my own handler for it, just like how it bounces the click when somebody click the button.

[00:08:48]
This is a custom event. It's called add item event. I made that. I have the power, right? And then I have my event handler. That dollar sign event is whatever came from the event. It's finally a stream because we said it was going to be right. So then in our event handler, I said it's going to be a string in our event emitter.

[00:09:11]
And then I could do whatever I want with it, just just as we expected. All right, I know 100% that event part can be a little weird. So, just to kind of more further illustrate it, that dollar sign event, angular word, you put that right there, right. It's like letting you know angular word, EV dollar sign event, and then it gets passed into your event handler under whatever parameter name you said.