Custom event Binding: @Output Decorator | Data Binding | Angular 12+

In this lecture, you are going to learn about custom event binding in angular. Using custon event binding, we can pass data from child component to parent component class.
To do this, we create a custom event and we bind it with @Output decorator. Then we raise the event and in parent class we create a method to handle that event.
Let's understand custom event binding with an example.

[@jjuliefrance]

Yes, top of the best channel on KZbin ! Each lecture is a master one.

[@PratikP-j1f]

Thanks for creating such beautiful lecture series keep it up regular

[@iamnoob7593]

Superb man , We people have to support such amazing content creaters

[@PratikP-j1f]

Teacher is indeed a gem! Never hesitate to appreciate a thing that add value to your life@@iamnoob7593

[@bhupendrasingh8570]

I watched each and every video without skipping and i am going to watch whole playlist.i just want to say thank you very very much for this playlist your way of explanation is awesome.i gain confidence after watching your video..this is top of the best channel on KZbin .i learnt alot from you sir..huge huge respect for you🙌

[@ZainJahangir-oq5hy]

yeah same as me

[@salsal-dd1dq]

Best explaining style by far, even better than paid angular courses I watched before. Keep up the great work Sir!

[@andyserrato]

Thanks! this is a well crafted course

[@RamanaVenkata-tx9tg]

Top of the angular course in world

[@neuroscience5024]

I bought the most popular Angular course on Udemy 2 months ago but now I feel like I wasted my time on that course. Wow man. You are amazing. Such nice and simple explanations of concepts. Hats off to you. You are an amazing teacher. Thank you very much for creating such an amazing course.

[@mohammedabdulaziz3658]

Dynamic example sir..thank you. Awesome explanation, even I don't know some core point of coding & you are covering all those things.

[@lacertezzadellapena]

It works!!! Thank you so much!

[@silvertoothdevlog6102]

Up until this topic I was getting everything but this one after that @output... I will have to watch this video a few more times apparently

[@devadharshinib8070]

Nice Explanation , Thank you sir

[@GouravKumar-fo1jo]

Worth watching sir

[@lacertezzadellapena]

Just a question, @proacademy. Could you please explain why in filterRadioButtonSelectionChanged: EventEmitter = new EventEmitter(); the type of the property (EventEmitter) has ''? Many thanks in advance

[@procademy]

EventEmitter is a class of generic type. In the bracket's we specify the type of data which the event is going to emit. In our example, we emmited event data of type string that's why we specified . If we wanted to emit data of number type, then we would have specified . In simple terms, an event can emit data of any type, but it is mandatory to specify in advance, which type of data event will emit. This is for type safety. If we specify that our event will emit data of string type, but in actual it emits data of number type, typescript will throw an error. In this way, it provides type safety. Hope this answers your question. Thanks :)

[@lacertezzadellapena]

@@procademy it does, thank you for clarifying! This course is so well thought! Thank you for your help

[@shubhamkumar-re8xx]

@procademy Please can you explain whether only using course.type with ngIf directive at line no. 11 in course.component.html would have worked or not? As from my point of view course.type do contain 'All' also.

[@ezzybrezzy-xl3wd]

course.type consists of type='free' and type='premium', there is not type as all!:)

[@ZainJahangir-oq5hy]

excellent course

[@HealthChampion]

You are awesome. :)

[@helpinghands6475]

World best course

[@ezzybrezzy-xl3wd]

Hello sir I have a doubt here @21:11 if I select free in the radio button and my 2nd condition in the ngIf is true, how can the HTML understand and pick only the free courses and display it?

[@rickyarya7673]

Consider this as if statement inside a for loop. And the output will be shown based on the if condition. Basically what happens is for loop will run for each element in the array and, if statement will check for each element whether it satisfy the condition or not. If the condition is true than it will print that particular course object.

[@ezzybrezzy-xl3wd]

@@rickyarya7673 Thank you

[@GnorL]

unable to get the value in the parent component through $event, help me

[@DanEllis]

You don't need the trailing slashes on your input elements. That was required for XHTML to keep the document well-balanced. It has no meaning in HTML 5.

[@sachinvarghese2223]

I think (ngModelChange) is better than (change) , so that less code is needed

[@AnkitSingh-sy6sb]

Hi Sir, I did follow your code but my filter radio buttons are not working only all courses button is working, If I'm clicking on free courses and premium courses I'm getting blank page. Please help !!

[@procademy]

Have you made sure that the case of your value attributes of radio button matches the case you have specified in ngIf?? I suspect that might be the problem

[@user-oi1ui9rm7x]

@@procademy i have the same problem because i code "course.type" with quotes. When i remove quotes, all working.

[@sivaprasad10410]

can u share json file pf this project

[@theegalasuryamanoj4492]

please share git hub link

[@procademy]

github.com/manojjha86/complete-angular-13-course

[@Macrumik500]

Your teaching skill is good but you have bad habit of repeating same thing again and again and do irritate most of the time. Just try to watch your own video after recording and before uploading.

[@salsal-dd1dq]

sometimes he's repeating to make sure that the audience got his point. The video is not made for you only, and instead of complaining, you can always skip

[@PratikP-j1f]

Man o man you are Jwell ! what a beautiful series that too free of cost however I believe I am obliged to pay you, consider it encouragement for making more such videos ! Please send me Your UPI ID, I would love to contribute RS 500

[@above___]

KZbin has a "thanks" button you can use that to give money 😄