In this session, let us learn about nd sale direct to end sale directive is used to set inline styles for the DOM elements. Already we have learned about style binding. With the help of style binding, we can apply a style property to a HTML element. In that case, you can apply only one style property. But with the help of MG style, you can assign multiple style properties to an HTML element. You want to change the values for your styles dynamically.

In that case, you can go in front end style. Let me explain this with an example. You can have a look in the first case I want to assign a style property to HTML elements. The value for end style has given us an object literal within minutes time giving the property and the corresponding value background Color Aqua that's what I have given what is my value for the site properties dynamic based on a particular thing I want to assign the value just have a look in the second example, here I am assigning the color dynamically for each and every HTML element based on a condition. You also hear color that is a property the value for the color is where a particular condition called that name dot includes all if Why is there a paint the colors red that is the font color will be red, yes, the font color will be green.

So, in this case, the value for the style properties assigned dynamically. In both scenarios, we are saying that we are assigning only one CSS style property. What if I want to play multiple style properties? So, in that case, what you can do is you can create a method in your call component class, within the method, you can create an object and you can assign the state properties. All these properties will are going to take a boolean value, then the value as I mean based on the Boolean type, a value will be assigned to the property, and that object literal is returned. So here I am trying to call get sales method, the return type of get stays with nothing but an object in object literal.

So, the value orientation over here also is an object literal. So, what we can do is, we will try this end sale using Visual Studio code. Let me go back to Visual Studio code. I'm going to work on the same component only trial component. So, let me start with the first part. Which true space end size This should be within square brackets equal to the value for n the size is an object literal.

So, within curly braces only are supposed to give the value. So, let me give it as background hyphen color colon green. Let me give a value for h2. So it is end state. example. Let me save this.

Already my application is running in the terminal you can just see this. Let me open it in the browser. You can see the output end style example I have given the background color as green it is reflecting. Now let us see the dynamic part how to assign values dynamically. So I'm going to work on the PNG file which we have done earlier. So let me just copy paste this first.

Ctrl C. Here control alvie now in de la, I'm going to add E and G scale. So within square brackets, end sign equals to. within double quotes, I'm going to add an object literal. So I want to assign the color based on the course name. So you're gonna call them code dot name. dot include, cause that name is nothing but a string.

So you can check with different methods which are available for a string. So here I'm using internets. I'm checking in for Whoo. I'm going with a example which is given over there, column B in single quotes. comma colon quotes that may include well if oil is available, then change the color to red. If it is not there.

Make the colors Brown. Make the color of orange This also has to be in single quotes. Right? I hope it is clear what actually we are trying to do what we need to say, I mean value for color, but based on a condition I want to assign value for color that is here in this case based on the course name, the color is getting a thing. Let me save it. Let me open it in the browser.

Now, I am not getting any output, let me check the value first for post name. Okay, see here, this course the title I have given it of course, that's me, that is why the output has not come. So let me just do Ctrl C Ctrl V. Save it, I will again open it in the browser. Now you can see the output node is earning war. So that alone is in red color. Now instead of war, let me change it to eight.

Save it, and again, open it in the browser. So Java and Angular is having so they're coming in with colors That's so good things are coming in orange color. So, what actually you have done is based on a condition you are assigning value for this sale property, this is the second part. Next again I want to go in for adding as I mean adding end styles with a value object literals the object literal is nothing but the returns a proper method. So, here Now, let me use h2, Guinea and G style equal to get sales round bracket calling method. Let me save this.

Now I need to go into the TS file. Let me open the trial component.ts file. Now, in this Ts file, I'm going to call this get states method. Let me add the method get styles wrong bracket curly brace Within Mitch, I need to create an object new size equal to I'm going to add just two properties color colon true question mark, red colon green single quotes comma next letter spacing letter hyphen spacing question mark three pixels colon nine pixels okay because it is a new term in TypeScript you have added within single quotes okay now I have missed one through also colon false. So now let me save this the indentation part you can just check it out. Let us check the output.

Now you can see the output I have got calling methods The color is not implied Let me see why, because I need to return the new state. Save it. Now let me come back and see the output calling method. The colors and red color because letter spacing is false. It is taking nine pixels. If it destroyed we'll take three pixels.

So this is how you work with end size attribute directive. Thank you.