 Hello everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to discuss about composition that is available in lightning web components. So after discussion on composition, I will let you know how we can set properties on child components. So basically, we will be discussing about parent child component relationship as well. So let's discuss about how we can compose components. So composing means like if you have more than one components, so you can call one component to another. So here with this example, you can see the topmost component will be to do app. And in that components HTML file, we are calling C hyphen to do hyphen wrapper. So basically component name is to do wrapper. So this will be known as a container component. And inside this container component, I am calling a component twice, which is named as to do item. Right. So let's understand the detailing about these components. So first we have owner. The owner is the component that owns the template. In this example, the owner is the to do app. So the to do app component, which is having all the components called. So this is the owner of the component or you can say owner component. The owner controls all the composed components that it contains. The owner can set public properties on composed components. So if you have any public properties in to do wrapper or to do item. So those public properties you can set through to do app component. So here you can see we are setting item name with milk and bread value. So this, these are public properties item name and this public property is defined in this to do item component. So I will give you a demo as well. So we can set properties, public properties on composed components. We can also call methods on composed components. So that is also, I will be demoing not in this video, but in upcoming video. Then listen for any events fired by the composed component. So composed component will be treated as a child component. So if child component is firing any event so that even can be handled through the owner or parent component. So this also I will be demonstrating in the separate video. So these are the three things that can be done by the owner component. Then we have container component. So a container contains other components, but itself is a contained within the owner component. In this example, this to do wrapper is a container. A container is less powerful than the owner. A container can read, but not change public properties and contained components. Call methods on composed components. Listen for some, but not necessarily all events bubbled up by the components that it contains. Right. So container components has less rights as compared to owner component. Now let's discuss about parent child relationship. So basically we discussed about owner and container and this one like to do item. This is also contained component. It will be treated as child. So when a component contains another component, which in turn can contain other components, we have a containment hierarchy. So we can have depth in this hierarchy. Like we have component one, which is parent. Then that component one is containing component two that will become a child for component one. Then it may possible like component two is containing component three. So this way we can create a containment hierarchy. So a parent component contains a child component. A parent component can be the owner of a container component. Right. So the this is brief about component composition that we have in lightning web component. So you can have containment hierarchy. So there can be parent child relationship and it can go to any depth. So whatever parent component is containing the child component. So parent component will be having a few rights like to set the values to child component attributes to call their methods and to listen the events. Those are fired by the child component. Let's discuss about how we can set properties on children. So basically if you have composition between two components, so one will be working as a parent and another will be working as child. So through parent, you can set the properties on children. So I'm going to demo you that by creating two separate components. So I'm just right clicking on this LWC so that I can create a new component. And I'm naming it as to do item. So this is my component that I created. So it is having HTML as well as JavaScript. So in this HTML, I'm just writing item name. So it is basically a property that I'm going to define in JavaScript. So inside JavaScript file, I'm going to write at the rate API item name and then semicolon. And here I need to write API. So I'm just putting a comma and then writing API. Right. So this API is a decorator. And if you want to expose this property to another component. So in that case, we just need to write any property with at the rate API decorator. Since we are seeing a demo like from parent, we will be passing values to children. So in this case, your child component should have property declared with at the rate API decorator. So this to do item will be our child component. Now I'm going to create one more component. So this component will be to do app. So it will be a parent component. And in this parent components HTML, I'm going to write some statements. So here I need to call C hyphen to do hyphen item. So this is my component name. So I just created component with to do item. But this is how I'm writing it in parent component while I'm using. So this naming convention, you also need to follow. This is Kabab case that you need to follow. And the attribute name is. Sorry, property is item name that we declared here. And it is also will be written as like this with Kabab case notation. And here let's say I'm writing milk. And it is closed here. Now if I want to call this again, so I can write it like this. So I called to do item component twice. And I just set item name with milk first time and bread second time. And I'm saving this code. So this is my parent component, which is calling child component twice. And child components property we are setting here as well. So this child component will be placed twice on the UI because we are using it twice on this parent component. So this way we are setting values to children properties through parent component. So this is basically parent child relationship that we can implement with the help of composition. So here this to do app will be owner and here to do item will be known as the composed component. And we are just controlling the property of that composed component through the owner of like that child component. So you can say to do item is a child component and to do app is the parent component. Now both the components are saved. Now we just need to modify the XML file. So here is composed will be true. Then we need to set the targets. And as usual, I'm choosing home page because I just need to place it on the home page. So to do app is done. Now I'm going to to do item here. Also I'm setting it as true and selecting targets. Then setting target as lightning home page and saving both the components. Now first I'm going to deploy to do item from source to org and then I will be deploying to do app. So I'm right clicking and deploying it from source to org. So my both the components are being deployed. Now jumping to org and I'm on home page. So I'm just clicking on the gear icon, edit page. So now I'm going to place my parent component and you will see that to do item component will be displayed twice because I called that component twice. So here to do app is available. I'm going to place it here and you can see milk and bread is displayed twice. Right. So I'm just saving it moving back and here you can see the result milk and bread booth are displayed here. Now if you want to display them in different lines, so we just need to use additional tags. So here I can write BR tags so that they will be available in different lines and I'm going to use lightning card as well so that it will be displayed properly. So here I'm writing composition demo and I'm going to cut this code and I'm placing it inside. So here I'm going to save this code. So this HTML file is modified. Now what I'm going to do, I'm going to implement CSS as well so that this the styling of that text will also be modified. So here in the parent component, what I'm going to do, I'm creating a CSS file. So to do app dot CSS. And in the CSS, I'm writing C hyphen to do hyphen item and here I'm going to write font size XX large. Right. So I just wrote the CSS for this component that I'm using here. Right. Another way will be like if you want to define CSS in the child component, so you just need to use host. I already demoed in the previous video so you can watch like how we can apply CSS between parents. Component. So here you can see I just wrote CSS on the parent component. Now I'm going to deploy it again. So we just modified the parent component HTML and created CSS file. So we need to deploy it only and here I just need to refresh it. So maybe you just need to refresh it twice so that changes will be applied. Yep. So here you can see changes are applied and it is showing composition demo because we use lightning card title and font size is also increased. So this way I hope you understood like how we can implement composition and through composition how we can set properties on children. So this is the best example of like understanding parent child composition and their behavior like how we can pass values from parent component to child component. So here I just created CSS file as well and I used AdWrit API decorator which creates any property as public so that it can be used into another component.