Custom event Binding: @Output Decorator | Data Binding | Angular 12+
Вставка
- Опубліковано 2 жов 2024
- 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.
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 UA-cam .i learnt alot from you sir..huge huge respect for you🙌
yeah same as me
Thanks for creating such beautiful lecture series keep it up regular
Superb man , We people have to support such amazing content creaters
Teacher is indeed a gem! Never hesitate to appreciate a thing that add value to your life@@iamnoob7593
Yes, top of the best channel on UA-cam ! Each lecture is a master one.
Best explaining style by far, even better than paid angular courses I watched before. Keep up the great work Sir!
Thanks! this is a well crafted course
Top of the angular course in world
Dynamic example sir..thank you.
Awesome explanation, even I don't know some core point of coding & you are covering all those things.
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
@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.
course.type consists of type='free' and type='premium', there is not type as all!:)
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
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 :)
@@procademy it does, thank you for clarifying! This course is so well thought! Thank you for your help
unable to get the value in the parent component through $event, help me
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.
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?
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.
@@rickyarya7673 Thank you
It works!!! Thank you so much!
Worth watching sir
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.
I think (ngModelChange) is better than (change) , so that less code is needed
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
UA-cam has a "thanks" button you can use that to give money 😄
You are awesome. :)
Nice Explanation , Thank you sir
excellent course
World best course
please share git hub link
github.com/manojjha86/complete-angular-13-course
can u share json file pf this project
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 !!
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
@@procademy i have the same problem because i code "course.type" with quotes. When i remove quotes, all working.
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.
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