In this session, let us learn about style binding. style binding helps to change the CSS styles dynamically for a DOM element. Just like how we have done class binding, we are going to do style binding. In this case, the attribute name of style. style is slapped with brackets square brackets, you can just have a look in this example. Here I've got a h1 tag to the h1 tag, I want to apply the CSS property color.

So I'm going in for style. The style is wrapped with square bracket, what property I want to apply color. So style dot color equal to new style. I'm not applying the color directly. The value for the color is given in the component class in new style equal to orange. If you want to apply the color dynamically, again you can go in for a boolean value true or false value On the value the color will be applied.

Now, let us try this out. Let me go back to Visual Studio code. So here let me create two h2 tags style dot background color equal to my state style binding. And again, they can do I can just check in for a play style. What about the supply side the supply side should be a boolean value. So, first let me go to the component class, let me give values for my style and apply style.

My style I need to use a background color. So, let me just give the background color of orange and apply size should be true or false. So, let me give the value as false here. It says this, I'll come back to the HTML page. Here. Apply style questions Map what color you want you can just give it over here.

So now I will give it a brown color pink because the values for the background color for this one will be pink background color. Now let me save this. Let us check this out. You can see style binding and choose background color. Both of them are getting the CSS background color property applied. In the first case, we are giving the color directly in the second place, we are choosing the color based on the value if the value is true, then apply brown if the value is false, then applied pink.

In our case applies find value is false. So pink is applied. So by endings, you can dynamically add the CSS style for a particular DOM element. But if you see in this scenario, we are adding only one property. If you want to add more than one property or more than one style property, you can go in for end style attribute. Again, that is a directive.

So we'll be talking about that later. Now here, I will change this to color style dot color. Now again, we can just check this out. Okay, this coming in pink color, I just make it as a darker color green. Now you can see it. So I hope this clear.

Learn to style binding. Using style binding, you can add or remove CSS styles for DOM elements dynamically, that is the idea. In the next session, let us learn about even binding. Thank you