In this lecture, we are going to explore another attribute directive called energy style.
This directive allows us to dynamically bind CSA's properties through these style attributes.
The syntax for the Energy Style Directive is very similar to the Energy Class Directive.
It's a great director for changing one or two properties on an element instead of applying an entire
class.
Let's give it a try by changing the font size of the button in our template.
First, we should store the font size in our components class.
Open the app component class.
Inside this class, we will create a property called font size.
Its value will be 16.
The next step is to buying this property to the buttons font size with the nji style directive.
Let's open the app template file.
On the button, we will add the energy style directive with property binding.
Once again, we're finding the directive by default, directive values are not interpreted as expressions
binding and directive will allow us to bind the value to properties in our class.
Otherwise, we won't be able to bind it to the font size property.
We will pass in an object with the font size, assess property.
Notice how I'm formatting the name of the CSS property in the object.
Previously, we didn't wrap the name with quotes in the Energy Class Directive.
However, the font size property is multi worded for multi word properties.
We need to wrap them with quotes.
Next, let's bind this KSAZ property to the font size property in our class.
This solution won't work yet.
Keep in mind, we are modifying access property font sizes must have a unit of measurement.
We have two options at our disposal.
We can add the measurement as a string or we can add it to the property.
Adding it to the property is the shorthand way of adding the measurement.
After the property name, we will add a dot, followed by the measurement.
Angular will upend the unit of measurement to the value there isn't an advantage to using this syntax.
It's all preference, in my opinion.
It looks a whole lot cleaner than appending the measurement to the value as a string.
Let's refresh the page.
As you can see, the font size for the button has increased in our app.
We don't have a way to increase the font size.
Luckily, we don't need to create such a feature.
We can use the developer tools to verify if the directives are working as intended.
Open the angular developer tools.
Under the components section, Angular has added additional information about our components.
Previously, we would only see a list of components.
However, the button element has been added to the list, despite our app component containing other
elements.
Angular will show us which directives are on the element if we apply directives to an element or component.
Don't be alarmed if you find elements that aren't components.
It may have a directive on it.
In the component list, we will select the app component.
Next, we will modify the font size property.
After making those changes, the button has enlarged, angular is capable of updating our elements after
they've been rendered.
This is the power of directives.
We have two directives for changing the appearance of an element.
Angular gives us flexibility for interacting with elements in the next lecture.
We are going to move on to structural directives.