1 00:00:00,390 --> 00:00:06,180 In this lecture, we are going to learn our first director of called the New Class Directive. 2 00:00:06,480 --> 00:00:08,100 It's an attribute directive. 3 00:00:08,400 --> 00:00:11,580 Therefore, it will change the appearance of an element. 4 00:00:11,910 --> 00:00:18,660 The new class directive allows us to change the classes of an element based on conditions dynamically. 5 00:00:19,200 --> 00:00:23,040 Let's give it a try before we start exploring this directive. 6 00:00:23,160 --> 00:00:25,290 We should make some room in our component. 7 00:00:25,560 --> 00:00:27,030 It's starting to get cluttered. 8 00:00:27,390 --> 00:00:30,000 Open the app component template file. 9 00:00:32,280 --> 00:00:35,520 At the top of the file, we will add an H.R. tank. 10 00:00:37,900 --> 00:00:40,900 Next, open the app stylesheet file. 11 00:00:43,430 --> 00:00:48,290 We will select the tag with some margins to give our template some spacing. 12 00:00:50,870 --> 00:00:51,410 All right. 13 00:00:51,530 --> 00:00:55,190 Let's begin using this directive for this demonstration. 14 00:00:55,220 --> 00:00:58,250 We will create a button for toggling a class. 15 00:00:58,580 --> 00:01:04,910 We should define a class for changing the background and text color of an element inside this style 16 00:01:04,910 --> 00:01:05,300 sheet. 17 00:01:05,510 --> 00:01:07,700 Let's define a class called blue. 18 00:01:10,330 --> 00:01:14,980 This class will change the background color to blue and the text color to white. 19 00:01:17,450 --> 00:01:20,270 Next, open the app component file. 20 00:01:22,800 --> 00:01:28,710 Before we can toggle the class, we should create a property for managing the state of the class. 21 00:01:29,070 --> 00:01:32,070 We will create a property called blue class. 22 00:01:32,430 --> 00:01:34,980 Its initial value will be set to false. 23 00:01:37,550 --> 00:01:42,360 The property we've created will be used as the condition for toggling a class. 24 00:01:42,710 --> 00:01:50,030 If the blue class property is set to false, the blue class should not be applied to an element, vice 25 00:01:50,030 --> 00:01:50,600 versa. 26 00:01:50,780 --> 00:01:56,030 If the property is set to true, we should load the blue class on the element. 27 00:01:56,450 --> 00:01:59,930 Let's begin dynamically binding this class to an element. 28 00:02:00,110 --> 00:02:03,590 Switch over to the template below the H R tag. 29 00:02:03,650 --> 00:02:05,330 Add a button element. 30 00:02:07,890 --> 00:02:13,830 Before we apply the directive, we should toggle the property, the button we're creating should listen 31 00:02:13,830 --> 00:02:17,460 for click events, bind the click event on the button. 32 00:02:20,140 --> 00:02:23,470 Remember to add the parentheses around the event name. 33 00:02:23,770 --> 00:02:30,370 Otherwise, we won't be able to run an expression after the event is embedded inside this expression. 34 00:02:30,520 --> 00:02:34,150 We will set the blue class to its opposite value. 35 00:02:36,730 --> 00:02:41,830 In an earlier section, I mentioned how logic should be outsourced to functions. 36 00:02:42,190 --> 00:02:44,650 This recommendation still holds true. 37 00:02:44,860 --> 00:02:48,100 However, we are not performing complex logic. 38 00:02:48,340 --> 00:02:51,700 Clicking the button should toggle the property nothing more. 39 00:02:52,180 --> 00:02:55,420 If we have something as basic as toggling a property. 40 00:02:55,570 --> 00:02:58,540 It's much quicker and easier to write it in line. 41 00:02:58,900 --> 00:03:01,510 You can consider it an exception to the rule. 42 00:03:01,720 --> 00:03:05,800 The last step is to dynamically add the blue class to the button. 43 00:03:06,130 --> 00:03:09,730 The Nji Class Directive is designed for this task. 44 00:03:09,970 --> 00:03:13,330 We can add directives by writing them like attributes. 45 00:03:13,600 --> 00:03:17,530 We will add the energy class directive to the button element. 46 00:03:20,050 --> 00:03:24,550 The blue class should be added to the button if the property is set to true. 47 00:03:24,940 --> 00:03:28,360 At the moment, we can't find this class dynamically. 48 00:03:28,690 --> 00:03:33,790 If we were to pass in the blue class, angular would add the class to the element. 49 00:03:34,090 --> 00:03:36,850 It's the same as using the class attribute. 50 00:03:37,270 --> 00:03:41,710 Dynamically binding classes to an element requires property binding. 51 00:03:42,160 --> 00:03:44,920 Surround the directive with square brackets. 52 00:03:47,580 --> 00:03:55,860 The Energy Class Directive supports various formats, the most common type of format is an object object 53 00:03:55,860 --> 00:03:59,940 syntax allows us to add multiple classes dynamically. 54 00:04:00,420 --> 00:04:04,860 The property name will represent the class we'd like to add to the element. 55 00:04:05,250 --> 00:04:08,010 The value will be processed as the condition. 56 00:04:08,400 --> 00:04:12,330 Therefore, we can add the blue class to this object. 57 00:04:12,630 --> 00:04:15,780 Its value will be the blue class property. 58 00:04:18,420 --> 00:04:25,620 If this condition evaluates to true, our blue class will be added to the element if the class already 59 00:04:25,620 --> 00:04:31,590 exists, but the condition evaluates to false angular will remove the class. 60 00:04:31,980 --> 00:04:34,590 You can add as many classes as you'd like. 61 00:04:34,890 --> 00:04:37,260 Let's refresh the page in the browser. 62 00:04:39,920 --> 00:04:46,070 If we click on the button, the blue class gets toggled on the element, it's working perfectly. 63 00:04:46,520 --> 00:04:53,780 The angular team has introduced the new class directive for easily toggling classes on an element that 64 00:04:53,780 --> 00:04:57,200 wraps up our discussion on the new class directive. 65 00:04:57,440 --> 00:05:03,890 It's a very powerful directive for dynamically binding classes to an element in the next lecture. 66 00:05:04,040 --> 00:05:08,600 We will look at an alternative solution to the Energy Class Directive.