Interactivity with Outputs

[00:00:00]
>> Now, let's do this last part. Let's do this last part. We gotta use outputs. This part can be a little tricky. Cuz here's what we wanna do, we wanna add a button, so that way, you see the Saved Cars at the top? I wanna be able to save a car, and then it show up in that list.

[00:00:24]
Okay, I wanna be able to save a car. Okay, now, saving a car, let's say it was an event maybe, right? We can call it an event, like you're doing something, an action. So we're gonna use an output for that, use an output. But where does that output go?

[00:00:45]
That's the question, right, to help us track best. Where does that output go? It goes into the listing component. Because we wanna go from that component, send the event back up to our parent component, okay? So now, let's first import output. First thing we gotta do, we gotta import it.

[00:01:09]
We gotta import one more class. Anybody know the other class we have to import? Yell it out if you know it, safe space.
>> The event emitter?
>> The event emitter, thank you. Awesome, very awesome. Okay, so now we got an event emitter. So what is the name of our output, do we know?

[00:01:33]
It's all good, we can get it from here. carSaved, yeah, that's the one. Okay, we have carSaved. And then I think we agree that it's going to emit the current car. Okay, this is a little bit of a trickiness here. Okay, a little trickiness for us to kinda sort out, okay?

[00:01:57]
We want it to be a new EventEmitter. And if I don't do this, the type that it will emit, let's see what TypeScript says. It says it's gonna emit an any, which means any type can match. That doesn't help us, though, because we know what type it's gonna be.

[00:02:16]
What type is it gonna be?
>> Car.
>> A car. So let's use our generic syntax. I know my Java developers see that little syntax and get so happy, they see them generics in there. I remember when I used to write Java code and I remember the book that was like the level up bible, this is the book you wrote and you read if you wanted to level up.

[00:02:39]
It was called Effective Java by Joshua Block, and I remember just how much that book changed my career. Two books changed my career. I can tell you this for everybody at home if you're trying to level up, two books changed my career. When I was a Java developer, at the time Effective Java was the most advanced Java book you could buy that could change the way you thought about Java.

[00:02:59]
The second book was You Don't Know JavaScript by Kyle Simpson. Because I thought I knew JavaScript and I read that book and I was like, damn, I don't know JavaScript. I actually don't know, and that's a fantastic series. You Don't Know JavaScript by Kyle Simpson, fantastic book. Two books that improved my career.

[00:03:15]
Okay, that's the free one for you all to go ahead and keep in your memory banks. And open source that book, so you can go read it too for free. Man, look at that.
>> And he has Deep Foundations of JavaScript on Frontend Masters.
>> Now, if you watching this-

[00:03:31]
>> They're going through the book.
>> If you watching this, when you finish, go watch that one, and then just become an extra genius. You're like, 2X genius. Okay, but let's keep it going, so now we have our event emitter, and let's actually do the button, we need our button.

[00:03:47]
So if we add a button here. Where did I say to put it? Did I say to put it inside the article or outside? You can add it outside, it's fine. So enlisting.component.ts, at the bottom, I'm just gonna add a button. And we can say Save, or you could say Add to Favorites if you want, or Add to Saved, you can do whatever you want, the label doesn't matter, right?

[00:04:13]
So we'll say Save Car, okay. I want to respond to clicking of this button, what do I need to do here? Just tell me the idea, and we'll work on the syntax together. What's the idea that I need, if I wanna respond to someone clicking this button?
>> You need a listener.

[00:04:35]
>> I need a listener, right, that is spot on. So the one I wanna respond to was click, right? Somebody clicks on it, I wanna just respond like that, and then it's giving me some help and letting me know to put the parentheses around so I can bind to it.

[00:04:52]
Now I need an event handler, so I need to do like handle, I wanna make sure I follow our directions, or handleCarSaved, okay? I wanna make sure I follow our directions here. All right, handleCarSaved, put your parentheses there. It's saying this doesn't exist, so let's bring it into existence.

[00:05:10]
Sorry, lemme slow down a little bit. So I just added my button, got my click, now I have my event handler. All right, so we're gonna make it. You haven't done this yet, so let me walk through this with you. CarSaved is a property on the listing component class.

[00:05:37]
Agree, disagree, give me a thumbs up if you agree it's a property? You don't agree? Okay, let's get that together then. So I got my listing component class, okay, and then I define carSaved here. So that makes it a property of my class. Why is that important, that it's a property and not just a variable?

[00:05:59]
It's how we reference it changes, okay? So now I have to use the this keyword, And say this.carSaved. Cuz if you type carSaved, it's gonna look in the local scope of this function and be like, there is no carSaved property here. All right, I don't know about this.

[00:06:20]
Okay, this.carSaved, okay? Then .emit. Submit the car. We can't just do car, we gotta do what? This.car. If the this keyword is messing you up, I have something for you. Check out This is Ridiculous on YouTube by Mark Texan. Seriously, I have a whole talk where I break down the mysteries of the this keyword And I introduce what I call the Beyonce rule, cuz she has a song called To the Left, to the left, to the left, everything you own in the box of the left.

[00:07:13]
Where is this car coming from? Check to the left. If there's something to the left, that is the origin of the property you're talking about. So if I look to the left of carSaved, what is it then? This, and this and this turns is the class. If there was nothing there, it'd be like the global scope.

[00:07:29]
And we have a whole talk about that, right? So you can finally learn it and then be the genius in your workplace, be like, yeah, I know how to solve this problems. All right, so we got everything that we need. [LAUGH] I'm cooking, don't laugh at me, you'll make me act worse.

[00:07:40]
All right, nobody laugh at my jokes, I will act worse.