Angular 2 Tutorial #15 - Custom Event Binding (& @Output)

Hey gang, in this Angular 2 tutorial, we'll take a look at custom event binding, and how we can use custom events to pass data upwards through our application. To do this we're also going to need to talk about the @Output decorator.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== PSD to WordPress Playlist ==========

============== The Net Ninja =====================

================== Social Links ==================

[Richie-]

best tutorial out there. have gone through many tutorials but nothing like this. this guy makes everything look so easy. thanks man. keep up the good work.

[mirjana]

Brilliant explanation! I have been struggling to get this concept for some days now but you broke it down so neatly, thanks a million!!! :)

[elvindauz]

On 5:51 you said "...when it happens it fires the yell($event) function on the HomeComponent..." I think you meant AppComponent?

I'm really trying to understand this custom event binding and I think your tutorial is really clear. Just want to double-check on that line.

Cheers!

[IronTeddyBear]

In recent versions of Angular, you no longer need to include the directives[...] in @Component, that's done at the module level by "ng create component foobar".

[Musica-zpzn]

You click on the son component (Home Component) and that sends only the EVENT to the father/Root Component .. not some "data" in this explanation as you mentioned IMHO, only the click event .. Then in the Root Component is where is set the alert and it shows when you click the button.. That's what I got it ..

[mwetter]

wish there was a love button because like isn't strong enough for this video haha, very easy to understand.

[ajaykumarverma]

i have follwing structure (Root, A, B, C, D, E, F, M, N are the component)
1. Root-> A, B
2. A-> C, D
3. C-> E, F
4. B--> M, N

now suppose i want to output data from E to D so do i need to follow the @output chain like first passing data from E to C (by using @output)then A(because it contains C) to D (by using @input) OR we can do directly from E to D ?

[busolaomosipe]

after logging the event handler e into my console ---console.log(e)---
I didn't get any records in my console screen(undefined to be everything else can i do just in the future i need to check for properties.

[wilfredomendez]

No issues to report, it did worked as instructed.

[songlee]

why start at the parent comp while you doing output event?

[muhammadyasir]

love this tutorial series. Thanks @The Net Ninja

[letoan]

Hello, I followed all your nodejs and angular tuts. it's great!. could you show me what should i do if I have a list of cities in CityComponent and I want to get to DistrictComponent to display as select (option) ?

[ergo-game]

Thank you for this Tutorial Playlist!!!!

[janatbek]

Thanks, you helped me with my today's task

[bessiemalek]

I made a git repository for the code that gets generated during this lesson. You can get it like this:

[Reaper_f]

Hi there, can i pass mutiple params in an emit or an object? need to pass 3 properties.

[kodieivie]

Great video shaun! Can i ask you what you prefer out of angular, react and vue?
This all seems a little long winded compared to vue.
i feel like angular and react are like old electronics that when you open them up there just packed with wires running everywhere and vue is like after circuit boards became better..

[ramajseethu]

What if we want to emit more than one custom event from the home component and listen to multiple emitted events in the app component? How do we do that?

[nvsabhishek]

how do you make such cool diagrams? i mean wat do u use?

[kirillzlobin]

Does this happen only between parent and child? Or events are listenable accrose the whole application?