In this session, let us learn about class binding class binding helps to set CSS classes dynamically towards DOM element. Say whenever you are having HTML elements, when you want to add or remove CSS classes, you can go in first class binding this you can do it dynamically also, let me explain this with an example. I have got a h1 tag, I want to apply the CSS class header style. For this, I have created a variable in the component class and assign the value was the CSS class. So here I have got my class equal to header style. Now in the HTML page, you can use class attribute, the class attribute should be wrapped by square bracket and the value of this class attribute will be the instance variable.

I saw you do class binding that is you are not applying the class directly. Instead you are trying to retrieve the value from the component class. If you want to apply the CSS class directly, you can go in for class got the CSS class name. In this case, you can apply only one CSS class, what if you want to apply more CSS classes for a particular element? For that you have to go in for any class attribute. Any class is a directive, we will be talking about this later.

So we are just going to see how to use a class attribute surrounded by square bracket. In this case, I am applying only one CSS class. I can also do change it dynamically by using ternary operator. Now, let us see this example. Let me go to Visual Studio code. I'm going to work on the same home component only.

First let me go into the corresponding CSS home component dot CSS. Let me add three CSS classes. dot header hyphen space. Color colon green font face colon 60 pixels and two more dots sign one color colon red. Let me copy this and then change it to style to the colors blue. Okay, this is done.

Now in the home component.ts let me create a variable as my class, my class equal to header space. Okay, next, let me go into the HTML page. In the HTML page, I will create an h1 tag. With class attribute, the classes are wrapped white square brackets equal to my class class binding. Let me save this. Now the application is still running.

Let me open it in the browser. Now we can see the output. Now we have added a CSS class to h1 tag. This also can be done in a different way. So I'll just copy paste the same line. Now, class dot CSS class name, header hyphen state equal to whether you want to apply it or not.

So the value for this should be true or false. Now for this I will go to this component class. Let me add another variable instance variable Play class equal to true and save it I will come to this HTML. So, here it is applied class new value. Now, I will save it. Now again let us check the output you can see that apply because we have given apply class equal to true does come in the same I mean the CSS classes applied.

Suppose if you don't want to apply it, you can just do one exclamatory Mark save it. Now, again we can check it out new values coming in black color. One more thing also let me explain here I am going to use again h1. Now, I will go in for class attribute equal to Now I will use applied class you know the value it is true right now I want to use a ternary operator. If it is true, then what you need to do is you have to play style one Colon style to put everything in single quotes Hello boys. Let me save this and also for Skype one on style two, I need to add it within double quotes.

So if the value is true with CSS class will be applied style one will be applied if the value is false style two will be applied style one is having a color of red style two having a color of blue. Now let me come here. I will save it. Let us check the output. You can see now it does apply I mean it has applied red color because the value is true. I'll go back here I will change it.

I'll just give an exclamation mark save again. Now you can see the color has changed to blue. So what actually we are trying to do is we are dynamically adding CSS classes. To a DOM element in this case, if you see based on the result style one our style two will be applied. So, either you can add style one or you can add style to to this h1 tag. So this is about class binding.

The next session, let us learn about style binding. Thank you