Custom event binding, event emitter and @Input @Output decorators [Interview Question]

[Music] hi guys welcome to code be code so in the previous video we have covered what is even minding in angular but we haven't covered how to create the custom events in angular so consider an e'er consider a case like in the previous video we have seen under event and key of event of the input HTML element in angular but we haven't seen anything like how to create my own custom events a consider a case here you can see that in this app component on HTML we have apt admin the the timeline this is actually the selector so this is what we are doing we are embedding the parent we are omitting the child in the parent so app Edwin is nothing but a child for app component or HTML which is actually nothing but a parent so whatever you write here like I have written here I have embedded this in the parent so I can see it here right I have embedded this custom component and parent so this is how parent and child relationship works but now I want that the child should know that the parent is saying something to the child or the parent should know that child is trying to say something to it so how do you actually make these parent-child relationship works in angular so the answer for this question is that we can use even Tomatoes for making the parent know that China is something to tell or a great input decorator or at the read output decorators for communication between communication between the child and company child and parent components so consider this is an example so this is my parent ok like here my parent is app component dot TS because app component or HTML has this selector which is nothing but a child component so there is a child there is a parent so how does these actually interact so a great input and a great output are the to take which are being provided by angular to us to make this relationship book so a great input and output allows us these recruiters allows us to share the data between childhood context and urge a parent context or the components where the Edit input is a writable property and threat output is observable so let me explain that to you consider it Brett input and output are doorways so whenever you decorate a variable with a great input or the great output it makes those variable or door this is a door right so nothing from here can go directly to child or nothing from the child can go directly to the parent what you need is enter a tank put an enter it out put to make this relationship work so whenever you mark any of the variable as I great output or input this door is being created here so whenever you write a great input this doorway makes the data from the parent to get into the child component or the data flow from parent to child and a great output this variable makes the data out from the child into the component so indirect input and output are basically both are independent decorators but you can use them like together also are independently also so if you use it separately what will happen if you use only at the rate input then only the data from parent can get into the child and child cannot tell the parent that I have something to tell you similarly the reverse is true if you use only a direct output for a variable which which is being used as an even emitter in angular then only the child will be able to tell parent that I have something to tell you please listen you won't be able to get any data from parents so that is how they can be used together also they can be used separately too so I'll give you an example in a moment for both of the scenarios so first we will look into a direct input thing so let me first create a child for you just for he'll appease LCB into SRC and CD into app and I will now in this app I will create ng generate component child so what will this command do it will generate a child in forest like how admin we have right if this particular commander successful we will be able to generate the child currently this is working for me and it says currently that it is successful so can are you able to see these four things the CSS file that HTML file this is the test file and this is the component of tiers which automatically has a child selector in it so this is the child okay now I will close this because my child is being created right now whatever I do I will tell you how ed great input and how I did it output works so let me first tell you how I did it input works so input says from parent to child so inside let me create just a second I have some code snippet it will helped me create things easily for you so that we don't waste our time in coding part so in HTML suppose it's a style work right I'll remove this I'll say today's item is an item now this is interpolation I have already discussed in the previous videos to you and this item is nothing but a variable in component or TSS I've discussed earlier so here I have to create that variable right so I'll create that variable but there's one interesting thing while creating this variable this variable has to be marked with a direct input selector and I will take that from angular core durable so when I say this there there is something called as today's item with interpolated item as item this item is nothing but a string type which is going to be received from the parent not the child so here you see constructor is empty ng on in it is empty there is nothing here but there is something called as a great input Reiter which says that this cell component is going to get this item from the parent now to make this child parent relationship work what I have to do is to take this selector from here and I have to AG the selector in parent so that I have to make this as a parrot and that as a child so let me do one thing I have to remove app ID min I'll put aptoide here okay so if I do this whatever what I am actually doing here I am making a child parent relationship where app component is my parent and app that slash child is my child now this is how I haven't created the child parent relationship and my child has this item and now this item is actually waiting is an input from to get the item from the parent so what my next thing will be I have to create this item in the parent so I say this as say my current item s television okay but now I have to save this I have to map this current item to my child so this is my child now I have to tell him that whatever property named as item you have is actually mapped with my property named as current item as current item so this is my current item and whatever my current item has in its value I have to send control C and in HTML file able to control me it's not taking I will write it current write current correct so what I'm doing here is I'm I'm this is something I've already told you right this is even buying the property binding thing the property binding is nothing but I am telling that the app child a variable named as item rate when you see it here listen this is an item and saying that this app child's item value must be evaluated from this current item and this current item is nothing but the property in the parent so whatever I type here will go as a value in this item and when it goes in this item it will automatically from there gets interpolated into this HTML file so I will save everything here I will save everything and I will see whether my things are combined 2 3 yes it is compiled successfully so let me see today's item is tail division so today's item was the parent thing right and this was an interpolation you remember today's item and in interpolation so this item was actually nothing but an input variable which I have not initialized in parent in the child but I'm waiting for my parent to give the value for that so if I write PV here and I save it and I will go and check my output it says teeny so this data is coming from the parent in this side so this is how it drip input works now let me make you understand how it the rate output works and similarly with the same thing you will understand how do I create a custom even for my own class so coming back to my diagram what at the rate output says and the rate output says that whatever if any of the instant incident happens in the child my parents should know about it so how does my parent know about anything that the child wants the parent to know I'll use the event emitter for the same and I have the code snippet for that also for you so consider and consider an input box in my child so this is my child right so I have an input box now I have discussed each and everything with you like what is this temp variable how do we assign the complete input box which is an HTML element into this simple temporary variable and how do I pass the value which is being written as a text in this input box to an or to a method name this add new element so this is something I've already explained in my previous video so by this time I I and I know that you understand how it actually works so this is an even binding this event the click event is actually a event of button element but an HTML element and on click of this particular button which is act to parents list this particular method is called with a value which is nothing but this temporary very a variable of input box or whatever I put in this input box comes as a value in this methods argument so when I save this file this expects this particular method in component dot T is fine so let's mean it can go into this component TS file and I have to create this method so this is my method and it says I have to omit something so this is very important thing here I'm coping it from this part to this place and I say that ok now this has to be done above it where I've done in trait input so again I have to import it it's giving me the importantly yes it is and again even permitted I have two important so it has taken this even emitter from this angular core package itself so all my issues are fixed and now it says that new item event which I have taken here the click button right so this click button this has a new even in Yui item even not emitted so the very first thing we have to understand here is to make the parents know that child has something to say you have to make a door and that door named as new item event is created with a direct output variable which is nothing but an event emitter in angry so whenever that button is clicked whenever I have something in this and then that value is present and whenever I click this button this click event calls this method so whenever it calls its this method emits some something like it it's a is not no please listen to me parent I have some value for you and that value is being synced to the parent so now I let let me go into the parent and let me write something that this is an event so I have to capture this event right so I have this code also written for you I have this event being catched this this is a child right so this child has an event this event is actually when whenever this event is cold this add item method will be cold with whatever attribute this method since is a pillow to this parent so I have to add this add item in my component or TS file so this is my component or TS file I want an ADD method here so this is my add method now I have my mother right now it needs some items so initially I will create these items for myself these items are nothing but some initialized values item 1 item 2 item three item for now I want that whenever you receive something just show it as a list right so how would I know that something is being received so for that I need something which says that yes now my parent has everything out of it so what I have to do is in this UI li I will do nothing I will do control shift uncomment and I will say let item of items and then I will interpolate my item here okay okay so what I'm doing here is I trading over my items what are my items items is this variable this is being creating a temporary variable for this list and then I'm trying to print that I've discussed all of this in the previous video so let me save everything if you still have any doubt please let me know in the comment section I will repeat all what I have taught yet till yet so this is how it's working and now I say that this is item one item to identify item four because already my items array has these four elements so that is why I'm able to see item 1 item 2 item create them for here but now whatever I type here and click this button add to parents list though this is something a code written in child so whenever this whenever whenever I want my parent which is having this item list to know that my child has something new to be added I will create this parent-child relationship so whatever I write here and when as soon as I click this button whatever I write here becomes the payload of this event so this is my parent whatever I put in this input box the value will become the payload which is being emitted with this method into the parent so this is how it captures it this is how it capture it since that payload to this method add item so L searched item and whenever this new item comes it push into this area so whatever I push into this array is actually nothing but visible here so I hope I'm clear how the flow goes the flow is this HTML my child gmail has an input box it has some item whenever it has some button the button has has a call to a method this method calling whenever on click is has called has called this method which is an Amit Amit method there's nothing but creates an event emitter event custom event which custom even is to be synchronized with this particular the app child selector and a method is called with that payload when the method is called it performs some action and that action is nothing but a push to this particular items area so let me make this clear to you I say my new item and when I click this my new item will be sent as a payload as to the event emitter to the parent and the parent has this new list so whenever something is written in this box and this particular thing is cleaned in the child the child sends the complete thing whatever right here is a payload to the list and the list gets it added into the main list so that was all about how I create a custom event so what you see here this emitter you see it here emit this is nothing but a custom even so that that is no whoo Ike's about how to create a custom human binding this is how you create a custom event binding so this is a this is an Simpson take similar to you I used to do this when we have button click so this was even right this was inbuilt even the click event of button but this is my event this is my custom even which is which which is which is the one I have created how I have created a new item even have done nothing but I've added this new item even has a great output which creates the custom even for me in angular so it are not I'm not stuck to just inbuilt events I can create my own event and tell my parent that I have something to tell you so this was all about the custom events on the ED grip input an iterate output things if you still have any issues with this particular thing please let me know in the comment section

Channel: Code Decode

Views: 2,813

Keywords: angular event binding, custom event binding, @input and @output angular, angular output decorator, custom events, event emitter, event binding, angular custom event binding, angular events, @Output decorator, angular @output, Databinding, Data sharing between Components, input and output in angular, Angular Inputs and Outputs, @input decorator in angular, @output decorator in angular, angular input output example, custom event binding in angular, event binding in angular

Id: -6JnhlnqorI

Length: 19min 43sec (1183 seconds)

Published: Wed Dec 04 2019