 Hello everyone. In this module, I'm going to demonstrate how you can call child component methods through parent component. So basically this we can do with the help of aura methods. So let's jump into developer console. So first of all, I'm going to create a child component and in the child component, I will be creating three aura methods and then I will be creating a parent component and we'll be calling those methods in the parent component. So clicking on file, new, lighting component, naming it as child message component. So component is created. Now here we can write the code. So I'm going to implement three aura methods. So if you want to create any aura method, so you need to use this tag or a colon method, then you need to provide the name. So I'm naming it as show, then action C dot show message and access equals to public. Right now, inside this aura method, I'm going to create one attribute, naming it as message. Its type is string and default value will be blank. So what I did, I created one aura method. Its name is show. So whenever you want to call this aura method in the parent component, so you need to use this name show. And when you call this method, so what action you want to perform that we will be defining in this show message method that I'm going to implement in controller. And this is the attribute. So basically, if we want to pass any value while calling this aura method, so that passed value will be available into this masses attribute. So name can be anything. So for demonstration purpose, I used message. Now, if you want to create one more method, so you can just copy paste and rename name as error. Here, I'm writing show error message and attribute the same type string. And here I am removing this default pasting it again. So this time I don't require this attribute. So I'm closing it here only naming it as remove and its action will be remove masses. So this way, basically, I created three aura methods. Two will be having some arguments in the attribute and one is simply a method which won't be having any attribute. Now, here I'm going to create one div whose aura ID is equals to masses. So later on in the controller, I will be creating a dynamic component. So that dynamic component will be rendered in place of this div. That's why I created it. So I saved this. Now I need to jump to controller. So in the controller, what I need to do, I need to create three methods. So first method will be show message. So I'm naming it here, copying it. Then second will be show error masses and third is remove masses. So this way, you can see three methods are available here. Now in these three methods, I need to call another method. So in this demonstration, I'm going to use this helper as well. So helper is basically also a JavaScript file and whenever you want to call a method more than one time or you want to repeat particular process. So what you can do, you can write the code in this helper method and you can call those helper methods more than one time in this controller. So I'm going to do a same here. So the purpose is helper dot show masses helper. So this is the method name which will be defined in the helper. And from here, I'm passing component event and one value as conform. Now I'm going to call the same method which will be defined in the helper. And from here, I'm going to pass third parameter as error. And here I'm going to call another method. So its name will be remove masses helper. And I don't need to, I don't want to pass second and third parameters. So I'm just passing component as a parameter for this. So now in the helper, I need to implement two methods. Two methods, one is show masses helper and second one is remove masses helper. So remember always whenever you have a method that you need to call more than one time or like any number of time in the controller. So instead of defining that method in controller again and again, you just can define that method in helper and you can call it anywhere in the controller. Now moving here, so here I need to write component, then event and severity. So this third parameter which I'm passing is confirm or error. It is basically a severity. So I will be creating a dynamic component that dynamic component will be basically a masses component. So UI masses will be displayed along with the severity. Like if severity is confirmed, so masses will be in green. If severity is error, so masses will be in red. So that's that kind of UI I'm going to create dynamically. So here I'm creating one variable as masses event.getParam then variable display message if masses. So what will happen whenever we will be calling this method from parent component. So parent component will be passing one argument that will be received in this masses. So what we are going to do here, like this event, like I will be calling the aura methods through a button click inside the parent component. So whenever that button will be clicked, so this arguments will be fast and they will be available in the masses. So if masses is not null, so what I'm going to do, I'm assigning value into display masses. So masses is dot message. So this message is the argument which is available here in form of attribute. So once this complete code will be implemented, so I will again explain the steps like from where methods are calling and how this value is available. So let me just complete this code first, then you will get to know each and everything. So I'm creating one more variable as masses panel and here I'm writing component.find messages. So basically component dot find will be finding this or ID messages that is available here. And that component will be inside this masses panel. Now moving forward, so dollar a dot create component. So now I'm going to create dynamic component. So UI column message, then title severity dot to uppercase. So basically this will be the component that will be created and its title comma will be available here. So title will be like a severity dot to uppercase. So severity we are passing as confirm or error. So confirm will be set as title and error will be set as title and in uppercase. Next attribute like if you want to set the severity. So here we are using severity. So this is attribute of this component and this is the variable that we are receiving here. And third I'm going to use closeable. So this way here you can see one dynamic component is created. So currently this is and I'm closing it here, putting up comma. Now I'm going to create one more component. So let me arrange this. Yeah, this is one component. Now here I'm going to create one more. So it will be UI colon output text value display masses and it is closed here. And then I need to close it. So this is closed. And now here I need to write a function. So function components status status masses list and inside this function basically first I will be checking the status. So if it is equals to success, so what I can do, I can fetch these dynamically created components. So basically whenever you create dynamic components, so those components will be available in this components variable. So what you can do, you can you can simply create a variable as UI message equals to components of zero, then variable UI output equals to components of one. So on zero, zero index this masses component will be available UI masses. And on one index, this output text component will be available. So now these are available in these variables, right? Now what you can do, you can put UI output inside the body of UI masses. And now you can put UI masses in the masses panel because masses panel is basically fetching the aura idea of that div, right? So both will be placed there automatically. So message panel dot set v dot body UI message. So these curly bases are closed. This bracket is closed putting a semicolon comma. Now I need to define one more method. So second method that I need to define will be for remove masses, right? So I'm just copying this statement from here. I pasted that. So basically in the remove masses component, we just need to clear whatever values available in that div, right? So here I'm removing these as well. So variable masses panel equals to component. So component dot find and or ID will be seen that is masses, which is available here as well. Massages, not masses. And then masses panel dot set v dot body and blank square brackets, right? So this way this remove masses helper is also implemented. So just rename it as remove. So this way our child component is created. Now it's time to create parent component, creating one more component. So it will be parent masses component. So it is created. I'm just closing this one. Yeah, here it is. So creating one's heading, calling methods of child component through parent component, then HR. Now here I need to call this child masses component, or ID equals to masses. So basically what I did, I just use the child component inside the parent component so that I can call them or a methods which are defined inside the child component. Now I'm going to create UI buttons. So this is first button. So its label will be show confirmation and it will be calling this handle show method. So I'm pasting it twice. So this will be show error, then handle error and it will be remove masses and handle remove. So this way our parent component is also created. Now I just need to create its controller where I will be calling aura methods. So I am just copying this handle show and handle error, handle remove. So these three methods are available here. Now what I need to do, I need to call the aura methods inside this. So component.find messages.show confirmation message. So basically what I'm going to do, I'm just finding this or ID messages in the parent component. So here it is. And it is for this child component. So through that ID, I'm just calling this show method which is defined here in the child component. And I'm passing this confirmation message as an argument. So it will be available in this message attribute that we are fetching here through this. Messages.message. So whenever I will be clicking on the button so that confirmation message will be available in the arguments. And that argument will be available in this messages and through masses.message I'm fetching it. So this way I'm going to call it here as well. So in the second method instead of show, I just need to call the error method. So replacing it with error and instead of consummation message, I'm just passing error message here. And here I'm going to call remove and I don't need to pass anything because in remove, we don't have any attribute. Right? So this way all the code is implemented. Now I'm just going to open demo app. So inside this demo app, basically I'm going to put parent message component, saving this code, clicking on preview. So here you can see this is the parent component message calling methods of child component through parent component. And these are three buttons. So if I click on show confirmation, so basically I made some mistakes. So here masses panel spelling was incorrect and status spelling was incorrect. So if you're following this video and implementing this, so make sure this masses panel and status is written correctly. If you correct this and click on this button, so here you can see this confirmation message is available. So this confirmation message, the output text and this conform is basically total, this green box is UI masses. If you click on show error, so it will come in red. If you click on remove message, so it will be removed. So this way, I hope you understood how we can call aura methods. Those are defined in child component through parent component. Thank you.