In this lecture, we are going to learn our first director of called the New Class Directive.
It's an attribute directive.
Therefore, it will change the appearance of an element.
The new class directive allows us to change the classes of an element based on conditions dynamically.
Let's give it a try before we start exploring this directive.
We should make some room in our component.
It's starting to get cluttered.
Open the app component template file.
At the top of the file, we will add an H.R. tank.
Next, open the app stylesheet file.
We will select the tag with some margins to give our template some spacing.
All right.
Let's begin using this directive for this demonstration.
We will create a button for toggling a class.
We should define a class for changing the background and text color of an element inside this style
sheet.
Let's define a class called blue.
This class will change the background color to blue and the text color to white.
Next, open the app component file.
Before we can toggle the class, we should create a property for managing the state of the class.
We will create a property called blue class.
Its initial value will be set to false.
The property we've created will be used as the condition for toggling a class.
If the blue class property is set to false, the blue class should not be applied to an element, vice
versa.
If the property is set to true, we should load the blue class on the element.
Let's begin dynamically binding this class to an element.
Switch over to the template below the H R tag.
Add a button element.
Before we apply the directive, we should toggle the property, the button we're creating should listen
for click events, bind the click event on the button.
Remember to add the parentheses around the event name.
Otherwise, we won't be able to run an expression after the event is embedded inside this expression.
We will set the blue class to its opposite value.
In an earlier section, I mentioned how logic should be outsourced to functions.
This recommendation still holds true.
However, we are not performing complex logic.
Clicking the button should toggle the property nothing more.
If we have something as basic as toggling a property.
It's much quicker and easier to write it in line.
You can consider it an exception to the rule.
The last step is to dynamically add the blue class to the button.
The Nji Class Directive is designed for this task.
We can add directives by writing them like attributes.
We will add the energy class directive to the button element.
The blue class should be added to the button if the property is set to true.
At the moment, we can't find this class dynamically.
If we were to pass in the blue class, angular would add the class to the element.
It's the same as using the class attribute.
Dynamically binding classes to an element requires property binding.
Surround the directive with square brackets.
The Energy Class Directive supports various formats, the most common type of format is an object object
syntax allows us to add multiple classes dynamically.
The property name will represent the class we'd like to add to the element.
The value will be processed as the condition.
Therefore, we can add the blue class to this object.
Its value will be the blue class property.
If this condition evaluates to true, our blue class will be added to the element if the class already
exists, but the condition evaluates to false angular will remove the class.
You can add as many classes as you'd like.
Let's refresh the page in the browser.
If we click on the button, the blue class gets toggled on the element, it's working perfectly.
The angular team has introduced the new class directive for easily toggling classes on an element that
wraps up our discussion on the new class directive.
It's a very powerful directive for dynamically binding classes to an element in the next lecture.
We will look at an alternative solution to the Energy Class Directive.