1
00:00:00,150 --> 00:00:05,820
In this lecture, we are going to explore another attribute directive called energy style.

2
00:00:06,360 --> 00:00:12,090
This directive allows us to dynamically bind CSA's properties through these style attributes.

3
00:00:12,510 --> 00:00:18,150
The syntax for the Energy Style Directive is very similar to the Energy Class Directive.

4
00:00:18,480 --> 00:00:24,060
It's a great director for changing one or two properties on an element instead of applying an entire

5
00:00:24,060 --> 00:00:24,660
class.

6
00:00:25,110 --> 00:00:29,400
Let's give it a try by changing the font size of the button in our template.

7
00:00:29,760 --> 00:00:33,690
First, we should store the font size in our components class.

8
00:00:33,990 --> 00:00:36,150
Open the app component class.

9
00:00:38,640 --> 00:00:42,960
Inside this class, we will create a property called font size.

10
00:00:43,200 --> 00:00:45,270
Its value will be 16.

11
00:00:47,840 --> 00:00:53,720
The next step is to buying this property to the buttons font size with the nji style directive.

12
00:00:53,960 --> 00:00:56,120
Let's open the app template file.

13
00:00:58,540 --> 00:01:03,220
On the button, we will add the energy style directive with property binding.

14
00:01:05,700 --> 00:01:12,840
Once again, we're finding the directive by default, directive values are not interpreted as expressions

15
00:01:13,110 --> 00:01:18,150
binding and directive will allow us to bind the value to properties in our class.

16
00:01:18,480 --> 00:01:22,650
Otherwise, we won't be able to bind it to the font size property.

17
00:01:23,010 --> 00:01:27,240
We will pass in an object with the font size, assess property.

18
00:01:29,830 --> 00:01:34,300
Notice how I'm formatting the name of the CSS property in the object.

19
00:01:34,600 --> 00:01:39,580
Previously, we didn't wrap the name with quotes in the Energy Class Directive.

20
00:01:39,890 --> 00:01:45,950
However, the font size property is multi worded for multi word properties.

21
00:01:45,970 --> 00:01:47,920
We need to wrap them with quotes.

22
00:01:48,220 --> 00:01:54,280
Next, let's bind this KSAZ property to the font size property in our class.

23
00:01:57,220 --> 00:01:58,960
This solution won't work yet.

24
00:01:59,230 --> 00:02:05,800
Keep in mind, we are modifying access property font sizes must have a unit of measurement.

25
00:02:06,040 --> 00:02:08,419
We have two options at our disposal.

26
00:02:08,710 --> 00:02:13,030
We can add the measurement as a string or we can add it to the property.

27
00:02:13,570 --> 00:02:17,710
Adding it to the property is the shorthand way of adding the measurement.

28
00:02:18,220 --> 00:02:22,540
After the property name, we will add a dot, followed by the measurement.

29
00:02:25,220 --> 00:02:32,090
Angular will upend the unit of measurement to the value there isn't an advantage to using this syntax.

30
00:02:32,270 --> 00:02:34,640
It's all preference, in my opinion.

31
00:02:34,670 --> 00:02:39,170
It looks a whole lot cleaner than appending the measurement to the value as a string.

32
00:02:39,590 --> 00:02:41,180
Let's refresh the page.

33
00:02:43,620 --> 00:02:48,420
As you can see, the font size for the button has increased in our app.

34
00:02:48,540 --> 00:02:51,480
We don't have a way to increase the font size.

35
00:02:51,720 --> 00:02:54,720
Luckily, we don't need to create such a feature.

36
00:02:54,990 --> 00:03:00,420
We can use the developer tools to verify if the directives are working as intended.

37
00:03:00,750 --> 00:03:03,030
Open the angular developer tools.

38
00:03:05,580 --> 00:03:12,030
Under the components section, Angular has added additional information about our components.

39
00:03:12,360 --> 00:03:15,720
Previously, we would only see a list of components.

40
00:03:15,990 --> 00:03:22,470
However, the button element has been added to the list, despite our app component containing other

41
00:03:22,470 --> 00:03:23,160
elements.

42
00:03:23,580 --> 00:03:30,360
Angular will show us which directives are on the element if we apply directives to an element or component.

43
00:03:30,690 --> 00:03:34,200
Don't be alarmed if you find elements that aren't components.

44
00:03:34,410 --> 00:03:36,210
It may have a directive on it.

45
00:03:36,690 --> 00:03:40,440
In the component list, we will select the app component.

46
00:03:40,710 --> 00:03:43,980
Next, we will modify the font size property.

47
00:03:46,610 --> 00:03:53,600
After making those changes, the button has enlarged, angular is capable of updating our elements after

48
00:03:53,600 --> 00:03:54,590
they've been rendered.

49
00:03:54,950 --> 00:03:56,900
This is the power of directives.

50
00:03:57,170 --> 00:04:01,010
We have two directives for changing the appearance of an element.

51
00:04:01,370 --> 00:04:06,710
Angular gives us flexibility for interacting with elements in the next lecture.

52
00:04:06,830 --> 00:04:10,040
We are going to move on to structural directives.