Now that we have learned about these structural directives, let us move on to attribute directives. Attribute directives changes the appearance and behavior of the DOM elements. They are used as attributes in HTML element, the image attribute directory, PNG class, PNG file and entity model entity class. It is used to add or remove CSS classes dynamically. Already we have learned how to add our Moodle CSS classes dynamically using class binding that we use the class attribute which was wrapped with square brackets. In that case, you can apply only one CSS class to the HTML element.

But with the help of entity class, you can bind one or more CSS classes to a single HTML element. Next nd skies, end size is used to add or remove CSS styles to HTML elements. In case of PNG file also you can apply more than one style property to a particular HTML element. Already we have learned about style binding. In case of style binding, we use attribute styles which was wrapped with square brackets, but with styles you can apply only one style properties, but with end styles, you can apply more than one style property to a particular HTML element. Next mg model already we have learned about mg model entity model helps in two way data binding.

To start with in this particular session, let us learn about entity class in detail. class in the class directive helps to add or remove the CSS classes dynamically to HTML elements. You can bind the CSS classes, which are of type string or an array or an object to entity class. That is, the value for an entity class can be of type string are an array or an object. Let us see that in detail. In the class with thing.

If you want to bind the CSS class, which is of type string, then you need to pass the CSS classes within single quotes separated by space. However, the context example, I have created a CSS class. I have created a CSS file in the CSS files, I have added three CSS classes 1213. I want these CSS classes to be applied to a HTML element. In the scenario, I am passing them as a string, you can just have a look one and two is separated by space and they are shown this in single quotes, meaning to say that it is a string. Next, in a class with array, if you want to bind an array of CSS classes to in G class, you need to go in for this.

I have used the same CSS file with the CSS classes. Now, these CSS classes are converted into an array, a string array and pass and value to N g class. Next end classes object. In case of nj classes object, the value for entity class is an object. That property of this object is going to be the CSS class. The value for the CSS class will be a boolean value.

If you are saying true, then that particular class will be applied to the HTML element. If you are saying false, then the CSS class will not be applied to the HTML element. Let me just explain. This is an example about the same CSS classes. Now, the value for nd classes objects within curly braces, you can have a look, I have given one as false two was true three is true, it means these two CSS classes true and 3213 will be applied to the p tag. So, whenever you want to assign value to mg class, it can be in the form of a string, or an array or an object.

In this way, you can assign more than one CSS class to HTML element. Now let us go back to Visual Studio code and try this out. Work on the same file component only. I open file dot component dot CSS. Let me add the three CSS classes 1213. It is done.

Next, let me go into the HTML file, file dot component dot html Here, let us try one by one. First let me create an h1 tag to this h1, I want to add the CSS classes dynamically. So it is mg class equal to, I wanted to add it in the form of a string. So to start with, I am going to apply only one CSS class. So within single code, one wonderful CSS class name, one class a string. Next, let me add to his CSS classes as strings.

In case of two classes they ought to be separated by space. So one space to say this class of string. Next, I want to show a path and the object caught also. So let me just face the same code. In this case, it is going to be an array so within square brackets You have to pass a CSS classes that should be applied. So, now, let me just apply one comma three, these two CSS classes should be applied here.

So, in this class, Eric and the next one is classes objects. So, here I am just removing this one within curly brace, I need to park on the properties, the properties are nothing but the CSS class and the value is going to be a boolean value. So, here let me just give it us one colon false comma two colon, true, comma, three colon true. property should be in single quotes. Now I have added it. So what actually I have done is I am trying to bind the CSS class.

String as an array, an object to N g class. Let me save this. And let me run the application control Tilda. Now my application recompile you can just have a look, let me open it in the browser. I'm not getting the proper output, you can just have a look it is showing it in black color only. The reason is I forgot to add square brackets.

So, let me add the square brackets. Let me save this. Now, let us check the output one classes same classes same class or sorry and one class has three. Now let us check this out. Let me minimize Visual Studio code and I will have the code on the browser side by side. Okay, what is the first one in case of first one I have given the value was one, so only the first CSS class will be applied?

So what is the first CSS class color is green letter spacing is five pixels. Okay? Good. Next, I am passing one and two. So one and two minutes towards having a background color thing that is applied over here. So background color, color and letter spacing is applied.

Then for the array, I'm passing one and three. So one is color green Letter Spacing five pixels, and three font sizes 50 pixels, you can see, so the background is not applied, the background color is not applied. And for the last one, it is of type object one is false. So don't apply the first CSS class to us through a played trace through a play. So you can specify what are the CSS classes that should be bound for this particular HTML element. So 213 is true.

So it will have a background color and font size only, it will not have a font color and letter spacing. So that's what is shown over here. So I hope it is clear with the help of nj class attribute directive. You can Remove more than one CSS classes to a particular HTML element. While we are saying this dynamic you can choose which are the CSS classes that should be applied by giving you a boolean value over here. This is all about PNG class attribute directives.

In the next session, let us move on to the end style attribute directive. Thank you.