Hello, everyone, and welcome back.
In this lesson, we're going to talk about the angular engie style called directive.
So as we have seen in the last lesson, we can use glass to add Cyesis glasses to our component conditionally
depending on the value of the course data, for example, the same way that we want to add Cyesis glasses
conditionally.
We might also want to add Cyesis styles directly.
Most of the time we are going to be able to style our components by simply using plain Cyesis glasses
and nothing more.
But there are occasions where we would like to apply a style directly to a component.
Let's then quickly apply a style to one of these elements and see how styling works without using energy
style.
First, let's say that, for example, we would like to make this text here.
The title of the card underlined.
We can do that using the input template syntax.
In the following way, we are going to access the style properties of our element.
So this is a DOM property.
This is not angular specific and we are going to write into it a value under the text decoration property.
So we are going to see that the text decoration style element of this course title div here is going
to have the value underlined.
So if we refresh here our application, we are going to see that now all the cards have here an underlying
title.
Now imagine that instead of only one style, we would like to apply multiple styles to this div.
So we will have to use multiple times this syntax, one for each style.
A more convenient way of applying multiple styles to an element is to using STEIB, the engie style
directive.
So we are going to be using again the input syntax, but this time we are using engy style.
Engie style is going to take here on the right hand side of a configuration object whose properties
are the styles that we want to modify.
So in this case, we want to modify the text decoration property and whose values are the value of the
property itself.
So in this case, we want to set decoration to underline and if we would like to add here multiple other
styles, we can do so via this configuration object by providing here multiple properties.
So as you can see, the underlying is still being applied here to our current title.
Now, we can also pass here an expression to engy style like it happened here.
In the case of inkless, we can in a similar way call here a function that we are going to be creating
here at the level of our component.
This function can return a configuration object just like we did for Engy class, so we can return here
our configuration object.
And if we try this out, we are going to see that everything is still working just like before.
But this makes it much simpler to turn on and off certain styles programmatically here at the level
of the template as we have access here to the course input object.
Notice that we could also access the object here.
But if we start adding too much logic to our template, then the template becomes less readable.
Instead of adding too much logic here, it's better to simply call a function at the level of our component
and implement here our logic in typescript.
And just like it happened before, in the case of Engie Class, we really want to avoid to have constant
values here.
We should only define here styles using engy style for properties that are dynamic and depend on the
content of the data.
Let's give here a quick example.
Imagine that instead of displaying here the coarse image using the image tag, we would like to display
the image as a Sears's backgrounds of these Karith here.
So in order to do that, we will need the following Cyesis property.
We will need to set back around that image.
So this is a thesis property that can be applied to any div that is going to apply a given image as
the background of a section of the page.
In order for this to work, we need to call you Warrell and we need to pass in here a complete neutral
to the image that we want to use as background so we can concatenate here the icon Eurail of our course,
for example, and we could have here multiple other dynamic properties if needed before trying this
out.
Let's switch back here to our example.
We were accidentally applying here, our styles here only to the title.
We want to instead apply these new dynamic style to the complete cad.
So we will now try this out.
We are going to see that our DB is.
Receiving as its background, the course image as intended, as you can see, there are a lot of options
for styling our components.
Let's put wackier our image and quickly discuss the multiple options that we have available for styling
our components.
So most of the times we want to style our components with plain Cyesis glasses, such as the one that
we have here that is the most common way of styling our components.
We should not use systematically engie glass or engy style.
Engie glass should be used a lot more frequently than engy style, and glass is meant for conditionally
adding or removing glasses depending on the content of our data.
So typically we want to use engy glass only for cyesis state glasses that indicate the presence of a
given state in our component.
On the other hand, sometimes there are certain Cyesis properties that we want to populate depending
on the data and example of the type of property is the background image property as we have seen.
So if we ran into that case, when we want to set a particular S.O.S property with data dependent content
for that, we can use engy style.
We are going to learn still a lot more about styling in the next few sections.
Right now, let's continue covering the main angular core directive's.
Let's talk about Engy Switch.