Build Web Apps with Angular 2 EventEmitter Demonstration
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "EventEmitter Demonstration" Lesson
>> Lukas Ruebbelke: So let's do another one. Let's think of an appropriate event.
>> Lukas Ruebbelke: Okay, clearly this is a contrived example. Like, I would never really dance in public. So here this is just an event, a method. Yes?
>> Speaker 2: So you have dance as the method name?
>> Speaker 2: That's okay to do?
>> Lukas Ruebbelke: No that's not okay to do.
>> Speaker 2: Okay.
>> Lukas Ruebbelke: Thank you for saving my life.
>> Speaker 2: You're welcome. What did I do?
>> Lukas Ruebbelke: It's what I do for a living. I save people's lives. Okay, so now into our components. I almost feel like I'm at a concert and at this point we're at the hit song and everyone could just jump in and sing with me.
[00:01:26] That it's almost. It's almost feel like we're going through like a top 40 songs from like the 80s and just everybody knows the lyrics. So I want to dance
>> Lukas Ruebbelke: Yeah, that would be more appropriate. Dance Me. Okay, and I'm going to go @Output() dancer. So creating a new EventEmitter and what I'm gonna do here
>> Lukas Ruebbelke: Instead of doing this.
>> Lukas Ruebbelke: You can also omit this event right from the HTML. So you would want to do it like this if you actually needed to perform some logic before actually emitting that event. For instance, saying this thing happened but I don't want to actually do it or I need to do some small transformation before I send it out the door.
[00:02:53] You can do it that way, or if it is really similar just pass through sometimes I will just bypass this entirely to where I have a component that just inputs and outputs and there is nothing else in the class.
>> Lukas Ruebbelke: Did I break something?
>> Lukas Ruebbelke: Hold on. Dancer output.
>> Speaker 2: So in that one isn't it called dancing or something like that? Does it have to be the same?
>> Scott Moss: You don't have a component with that element.
>> Lukas Ruebbelke: That's right.
>> Scott Moss: Also, if the property-level decorators. It just looks weird to anybody for the inputs and outputs. You can also use, you can also define your inputs and outputs on the component decorator, too.
[00:04:08] So right where you put your selector and your template, you can put input and output and they both take a raise, which strings the inputs and outputs that you want. That's an alternative syntax. But I believe the property decorators, are the preferred sentence.
>> Lukas Ruebbelke: So, that's why it did not work.
[00:04:25] It's because I forgot to go back to my parent component and wire this out. So now, when dancer fires, it's going to fire this event here and we're going to set this. Now what I also need to do, I did like half a demo here, I thought it was ready to go.
[00:04:44] Possibly the emit method on the event emitter is deprecated now.
>> Scott Moss: And then use text so [INAUDIBLE].
>> Lukas Ruebbelke: Did that just happen like three days ago?
>> Scott Moss: It was recent, yeah.
>> Lukas Ruebbelke: My.
>> Scott Moss: Text style.
>> Lukas Ruebbelke: It's only appropriate. And there we go. So any questions on events?
[00:05:21] You just omit it from the child component, pick it up, put put it in the parent component.
>> Lukas Ruebbelke: Are we good on chats?
>> Speaker 4: Did you cover, can you omit an object or an array?
>> Lukas Ruebbelke: You can omit anything.
>> Lukas Ruebbelke: So for example,
>> Lukas Ruebbelke: Just see this here.
>> Lukas Ruebbelke: [SOUND]
>> Lukas Ruebbelke: So we have an items list, and, this is in our sample app. So when something is selected, select item. And then in the handler, it's actually getting the item object. And, so it can be a, you know, pretty much any value. Whatever you pass up that's what your dollar event is going to be.
>> Lukas Ruebbelke: Next question?
>> Lukas Ruebbelke: Are we good?
>> Speaker 4: I don't know if you want to cover this later or not but they're kind of curious on a discussion when Angular 2 makes sense versus React from a technology standpoint, but maybe you wanna cover that towards the end.
>> Lukas Ruebbelke: That might be, so I will answer this.
[00:06:46] This is a much large discussion than I think the 30 seconds that I'm going to give it. I think React is an excellent, excellent framework. I think a lot of how they approach state management and even component driven design has really affected how Angular 2 comes together. Six months ago, I would've probably said if you're doing something totally greenfield and that Reactor's a really strong contender.
[00:07:13] Now that we are in beta and going very quickly to basically a 1.0 release for Angular 2, it gets a little bit more nuanced. I think that according to Brad Green Angular 2 is really ready for production other than they're making a few additional changes to what is available, to the API, and working on optimizing the payload.
[00:07:39] With that said, for me one of the reasons why I like Angular 2 so much, and I would generally at this point choose Angular 2 over React is because of the true reactive mechanisms baked into the framework, which you will see tomorrow. I think that's really, really core, or it's just key for building out like large scale applications that when you have observables baked into it that you can take the kind of reactive patterns, especially reducts.
[00:08:09] And applied into Angular, now you can have, you have this parody, but then you add in the new change detection, which for a lot of benchmarks, as fast if not faster than React. And with the, kind of reactive thing, being the big one, baked into http, and forms, that to me is just huge.
[00:08:33] It's really a toss-up, I would have to know more to say yes or no. Which one to choose. I think they're both great frameworks, but one because I already understand Angular. That's probably where I'm going to stay. But really I think it comes down to personal preference and I happen to really like reactive things, like truly reactive things, such as observables.
[00:08:55] Scott, if you would like to give a two minute answer to that, I think this is interesting and a valuable side discussion.
>> Scott Moss: Yeah. So I use React all the time using it for over a year now and Angular. I would say the reason I would choose Angular 2 right now would be I think of react as more of a library than a framework actually.
[00:09:13] It's really just a view library and you still have to be diligent and resourceful and figure out the other pieces as far as like, what are you gonna use for your Http client. State management. All these other things you have to figure out. Some people still use courier with X.
[00:09:49] So Angular 2 keeps that same approach where we're going to be that same complete package we were in Angular 1. But now we're coming back, we're using standard technologies like Templates, Shadow Dom, we're gonna be building with type scripts so tooling and documentation is better. And we're also gonna improve and learn what React did and apply some of the methodologies and some of the stuff that people are doing with unidirectional data flow and what not.
[00:10:11] So they kept the same stuff, they learned from React. And they cooperated with them, they did that stuff and it still the complete piece of. If you just want to start building what I happened to download and research a thousand different libraries then I would choose Angular 2.