 Hello, everyone. I'm Sanjay Gupta. Welcome to Sanjay Gupta Tech School. In this module, I'm going to demonstrate how you can implement component event in lightning order component. Let's understand how we can implement component event. So this demonstration will be creating three separate files, one will be component event. Second will be child component, child lightning component and third will be parent lightning component. So if you want to pass masses from child component to parent component, so we can use component event as a base. So first I'm going to create component event file. So here you can see we have an option lightning event so you can create lightning event file from here. I'm naming it as component event. So this file is created. So I'm just closing this description file. And here you can see by default it is showing type S application. So I'm changing it to component and I'm removing this. So this way this aura event tag is available here. It's type is component. So now here I can define some attributes. So this way, basically I created this component event file. So this component event file is basically having two attributes. Right. First one is masses and second one is label. So what will happen, child component will be firing an event. So on fire of that event from child component values will be available into these masses and label attributes. And parent component will be handling that component even so parent component can access these attributes values so that that parent component can process these values. Right. So now I'm going to create one lightning component. So I am naming it as child. So it will be our child component. Inside this child component, I'm going to register the event. So in my previous module, I explained you four steps. So first to create component event. So we already created it. Second step is to register the event in the child component or in the component, which will be firing the event. Right. So we are on second step now. So I'm going to register the event. Here, I'm providing name as CMB event and type equals to C colon component. Right. So this component event that we created, I'm using it here. Right. And this is a name which we will be using in this component. So this way I registered the event. Right after registering the event. So I'm going to create one attribute and naming it as message string and type is string. Then I'm creating one heading where I'm putting the text as component event notifier. So the component which will be firing the event will be treated as notifier and the component which will be handling that event will be known as handler. So here I'm going to create UI input text label equals to masses value equals to dot masses string. So this variable is available here. So we are assigning its value into this input text. Then I'm creating UI button. Its label will be fire component event. Then press equals to C dot fire component event. Right. So so this way this child component is implemented and here this input text and button are available. Those will be rendered on the UI. Now it's time to define this method fire component event. So I'm just opening the controller and relabeling this function as fire component event. So first step was to create the event. Second step was to register the event in the component source component from where event will be fired. Now third step will be to fire the event. So to fire the event you need to define this JavaScript controller. So here I'm creating variables component event equals to component dot get event. And CMP event. Right. So this CMP event we created here. So we registered the event. We registered this event and with this name. So I'm using this name like component dot get event. So this event information will be available in this component event variable. Now I'm creating one more variable named as masses string then component dot get dot masses string. So V dot masses string we created here as an attribute. So its value will be available here in this masses string. Now masses string equals to dollar a dot util dot is empty masses string. Then question mark no masses past and then colon masses string. Right. So this way, like we are just checking if this masses string is empty. So this no masses past will be assigned into this masses string variable. Otherwise this masses string will be assigned. Right. Now after that I'm going to use component event. What set. Params. So our component event information is available in this component event variable. So I'm going to set the parameters. Here you can see we have two attributes. So now I'm going to set the values into in these two attributes. So here I'm going to write masses colon masses string and label colon custom label. Right. So here you can pass any variable as well. So this way this component event parameters are set and it is ready to fire. So you can write component dot event and fire. So this way we just completed three steps. We created the component event. We registered it in this component and in this components controller we fired it. So wherever in the parent component we are going to use this child component. The parent component will be firing the event and the parent component will be able to handle those and parent component needs to implement the handler. And in that handler we just need to pass these values which we have set here. So after implementing these two event and component. So now it's time to create one more lightning component and I'm naming it as parent. And in this parent component I'm going to use that child component. So just creating or attribute name equals to masses from notifier type equals to string then or attribute name equals to even count type equals to in these are and default value equals to zero. Right so this way these two attributes are created. Now I'm going to create or a handler name equals to see MP event right so here we provided this name see MP event so here you need to use this name. And you need to define the event name as component event so we created this event so you need to use that. And then action so handle component event. So this way we handle so this is our fourth step to handle the fired event. So we fired the event from the child component from here and we are handling it here in this component. Right. So here I'm writing component event handler. So this is a component which is handling the event. And here I'm writing P tag and inside P tag I'm writing V dot masses from notifier or P tag. And here I'm writing V dot event count. And here I'm writing C dot child. So this way this child component is the nested component of this parent component. Right so this way the component file is created and whatever values will be available in this message from notifier and even count will be displayed on the UI. So here for separation purpose let's use this horizontal rule as well. And now I'm going to define the controller of this parent component. So here in this controller I need to define this method. So when this when the component even will be fired so in the parent component we are just creating this handler. So if that event is handled so what you want to perform so that you need to define in the method. So here I'm going to create a variable as masses, then even dot get parent message so whenever event is fired and you are trying to handle. So even will be even information will be available in this event variable. And through get param you can have the parameters. So parameters are to message and label so we are fetching those. So masses will be stored in this masses and label will be stored in this label variable. And component dot set. The dot message. Notifier. And messes so this message dot sorry V dot message from notify this variable or this attribute is available here. So it will be filled and it will be displayed here. So line number 13, and again component dot set V dot label equals to label. Right. So here I'm just copying it and pasting it and changing it to label. Now, variable count equals to pass and component dot get V dot event count. So every time whenever this method will be executed so this count will be incremented and we are going to set it. Right. So this way, everything is implemented now. So I'm just going to recap. So first we created this component event file. Then we created child component and we registered that even then we created child components controller and we fired the event after setting the parameters. We created parent component and we implemented this handler statement. And then in parent controller we just defined the method which is bind with the handler. Now it's time to open the demo application. So I'm just searching for demo application and going to call this parent component. So I'm previewing it. So here you can see above these values are for parent handler and these values are for child. So in child we used UI input text and UI button. So here if I write something, so let's say I'm writing my name and clicking on this button. So here you can see my name is displayed Sanjay Gupta and count is one. Now, if I put any other name and click on this, so that name will be passed automatically and count is incremented as two. So this way, this value we are providing child component, but on this button click event is firing and that's that value is like available in the parent component through that event component event. So this way in one of the previous module I demoed you bounded and unbounded expression. So in the in those expressions like if you want to pass values from parent component to child component so you can use those expressions. But if you want to pass message from child component to parent component so events are the possible ways. Now it is not showing custom label so let's check why it is not showing. Okay, we just need to create that variable as well so that it can be stored. So I'm just creating that variable. Now I'm refreshing it again. So you can see along with this parameter that we are passing from child to parent. It's showing this custom label as well so why custom label because in the child controller we just passed this static message on the if you want to pass any variables value so you can do that as well. So this way, I demonstrated you how we can use component events to pass values from child component to the parent component and always remember component even works in a parent to child hierarchy only. Thank you.