 Hello everyone. In this module, I'm going to demonstrate how we can implement bounded expressions in order components. So let's understand the difference between unbounded and bounded expressions. So in last module I demonstrated how we can implement unbounded expressions using hash. So in case of bounded expression in place of hash you need to use exclamation sign. So this is the example. So here you can see this parent component is having one attribute named as parent attribute. And here we are calling or adding child component. This child attribute is the attribute which is which will be available in the child component. And here I'm passing value of parent attribute into child attribute and using this exclamation sign. So in this case, like both will be bounded. If you change parent attribute, so change will be affected in child attribute as well. And if you change value of child attribute, then it will affect parent attribute as well. So this V dot parent attribute is a bounded expression. Any change to the value of the child attribute attribute in child effects the parent attribute attribute and parent and vice versa. Right. So let's do some hands on. So I'm going to create new lightning component. So I'm naming it as bounded child clicking on submit. So first of all, I'm going to create one attribute naming it as child where and its type will be string. After that I'm going to create one handler. So this name is change. So what I'm going to do, I'm going to track change that is happening in this child where attribute. So here I'm writing value equals to then colon V dot child where so it means this change handler will be working on this variable or attribute, then action. I'm shifting it into new line action equals to on child variable change. Right. So this way I created one handler. Its name is change. It will be applied on this attribute. And when any change is happening in this attribute so this function will be called automatically. Right. And later on I will be defining this method in the controller of this component. So I know that I'm writing some more code in this components view. So I'm going to display value of this child attribute. Right. So this message child value and this V dot child where so this attributes value will be rendered on the UI. And then I'm putting BR tag twice and implementing lightning button. Its label will be update child where on click equals to see dot update child. Right. And then I'm writing one more tag that is horizontal rule. So now I need to define two functions. One is this on child where change and another one is this update child. Right. So what I'm going to do. I'm going to implement update child first and then on child where change. Right. So these two methods will be implemented in the controller of this component and controller is written in JavaScript. So in previous modules also like we implemented controllers. So I'm just copying this first pasting it here. Then copying this putting a comma and pasting it here and copying this action so that we can put it here as a function name. So this way I need to implement two functions. So when someone will be clicking on this button update child where so this function will be called and in this function we will be updating value of this child where. So I'm writing component dot set we dot copying this attributes name putting it here and it will be displaying the value updated child value right and when this attributes value is updated. In that case this own child where change function will be called and here I'm writing some console dot log statement so in console these messages will be displayed. So child value has changed console dot log hold value. Plus even dot get param hold value. Console dot log new value plus even dot get param value. Right. So this way this controller part is implemented. So it is having two functions one will be like setting new value for the attribute that we created in the components view. So it will be updated when it will be updated so we implemented change handler. So this method will be called and these three masses will be displayed in the console. So old value and the value like new value will be rendered there right now. I'm going to create one more component. So its name will be bounded parent clicking on submit. So now creating one more attribute. So here in this case name of this attribute should be parent where because we created one attribute in child as child. So here I'm creating it as parent where type is string and putting default value as parent value. Right now putting handler name change value equals to V dot parent where so it is same like the implemented in child component. So action shifting it into new line C dot on parent where change. Right. So if you have space so you can write it in single line as well. So these two lines are actually single tag. Then here I need to call or I need to add that bounded child component. Then child where equals to E dot parent. So this is important because here what we are doing we are passing value of this parent where attribute into child where attribute right and we are using this exclamation sign. So this is basically bounded expression. So whenever after rendering if parent where attribute is updated so it will be updated automatically child where attribute and if in child component value of child where attribute is updated. So this parent where attribute will be updated automatically. So both both are kind of connected. Now here I'm writing parent value V dot parent where right so this way this parent where will be rendered on the UI. Right. After this putting these BR tags. Then lightning button label is update parent where and action equals to update parent. Right. So this way this parent components view part is completed. And we need to why it is showing some error for you to see. What is fine from my mock up. Okay. No worries. Maybe first we need to implement this function in the controller. Then we can save it. So let me just copy this. Actually, we need to use on click here in place of action. That's why that error is coming. Right. So I updated it and now it is saved successfully. So now what we need to do. So let's implement this update parent and on update with where change functions. So here I'm implementing a statement component dot set V dot parent where. So I will be updating this parent where attribute and signing value as updated parent value. Right. And here we need to put these console dot log statements. So I'm copying these from here. Paste in it. So parent value has changed old value. Then this will be same. And this will also be same saving this code. So this way all the component and controller code is implemented. Now I'm just opening demo application so that we can call it. So we need to call bounded parent. So I'm updating this application. Clicking on preview. So here you can see child value. It is showing parent value as a message. Right. And parent value. It is also showing this parent value as a message. So let's compare it with the code. So if I come here. So actually this component rendered and it is first ranked in this child component. And since we are passing this parent where attribute value into this child where attribute and its default value is parent value. So that's why child where which is created here it is displaying value as parent value. Right. Then here after that we are creating a lightning button. So update child where so update child where this button is available here. And then after rendering child component this parent component will display this so it is displaying a parent where masses like parent value. So it is available here. And then we have a lightning button. So it's label is update parent where so that is also available here. Right. Now see the difference like in previous module where I implemented unbounded expression. So there if I clicked on this button so only this passes was changing. But now if I click on this button so you will see both child value and parent value will get changed. So see updated child value and here also updated child value. This is because here we are using exclamation in place of hash. So both are bounded if we are updating child where so parent where we'll also get updated automatically. Now if I click on this button so it will update the value of parent where so again you will see both the masses will get changed. So updated parent value updated parent value. So this way if you if you want to like have expression so you have two ways either you can implement unbounded expression. If you don't want that update gets reflected from one component to another. And if you want that change to be affected or like if you're updating child components attribute and it should affect parent components attribute, then you can use bounded expression. So now I'm just going to inspect this and opening console. So here also you will be able to see those passes like child value has changed whole value parent value new value updated child value. Then parent value has changed hold one this and you want this then child updated all this new this then child value has changed so this way these masses are available here because we implemented these statements in the controller with this function so whenever this attribute is changing this method is calling and the results are displaying in the console. Right so so this way you can like follow this masses. So here you can see it is showing old value updated child value then we clicked on parent. So it is showing new value as updated parent value, then for parent one parent value has changed updated child value and updated parent value. So this way these results are available here. Right, so I hope you understood this relation between unbounded and bounded expression, how it is implemented. Thank you.