Hello, everyone, and welcome back in these lessons, we're going to start to talk about components,
styling, and we're going to introduce the Engy Class Core Directive, as we have seen before.
Many of the styles that we are using here are coming here from these global styles, dot cyesis file.
We can also add styles locally at the level of the component, as we will see right now.
Let's talk about the particular type of styles which are conditional styles.
These are styles that are added to sections of the page, depending on the content of the data.
So unlike the styles that we have here, such as, for example, the course of class, there could be
a class that is added here to our course cart depending on if, for example, the course is of category
beginner or not.
Let's now go ahead and add such a conditional class to our component.
We're going to have it directly here at the level of the component Cyesis file itself, which is currently
empty.
We are going to first start by writing our Cyesis selector and what we are going to target is this container
deve here that is wrapping the whole course card component.
Let's then create a style that targets any element that has applied this course card class and let's
have here an exercise class beginner.
So these Cyesis class is also known as a state class.
These type class is going to be applied only to courses of type Biggin.
Then let's make these beginner class very visible in our screen.
We are going to have here a bright colors such as, for example, this one.
And let's try these out to see if this style is working correctly.
So if we head over here to our course car component, let's quickly adhere to the beginner courses class
and see that indeed we can very quickly spot a curve with this style.
But the style, as we can see here, is being applied to all the cards.
We want to apply it only to certain courses.
Let's then start by removing here the courses class and see how can we apply styles using INGLĘS instead
of engie.
Class is a core directive that comes bundled with angular.
So with Engie Class Directive, we're going to be able to pass an that argument that is going to turn
on or off certain courses classes.
The expression that we pass in here to engie class can take several forms.
We can pass to energy class A string, we can pass also an array and we can also pass it a configuration
object.
Let's explore the three possibilities.
Let's see, for example, how can we pass a class that we want to activate using a string?
We can do so by passing in the string here and passing the beginner cyesis class.
So as you can see, the string that gets received gets interpretive access and the sixth class is added
to the page.
Now notice one thing.
This string does not have to contain only one Cyesis class.
We could potentially have here several Cyesis classes separated by a space.
So if we try this out, you can see that the style has remained unchanged and our cards look the same
as before.
It's not recommended to apply these type of styles that are constant using engy class.
These type of styles are better applied using the Sears's class property.
As usual, engy class is really meant only for conditional styles and other thing that we can pass to
engie class instead of a string is an array so we can pass them here.
An array of strings containing a list of all the Cyesis classes that we want to apply to a given element.
So again, if we pass in here these two Cyesis classes, we are going to see that they are being correctly
applied here to our template as expected.
Another thing that we can pass to Engie Class is a configuration object.
So instead of passing a string or an array of strings, we can instead pass in here an object whose
properties are the names of the asset classes that we want to apply and whose values are true or false,
depending on if we want to apply the style or not.
So as we can see, our styles are still working as expected.
But if we now sit here, the beginner class to false, we are going to see that the beginner class is
no longer being applied to the template.
Now notice the following about inkless.
We don't have to pass in here as the expression has to inject less directly an object that is hardcoded
here at the level of the template.
Instead, what we can do is we can.
A function that returns as this configuration object.
This is actually the recommended approach in order to keep the template readable.
So we are going to call here a new method called karaba classes.
And we're going to create this new method here at the level of our component.
So this method is going to return to the template, the same thing that we were returning before.
Let's start here with a simple example.
We are going to return here a configuration object, which was the last example that we gave notice
that this method could also return a string or an array of strings like we have seen before.
Those are also accepted by engie class.
So if we try this out, we are going to see that again.
We still have here the correct styles applied if we return here to the valley.
True.
We are going to see that now at the beginning of the class is being applied as expected.
So this is a better way of adding some conditional styling to our class to call a method and adhere
to our logic in typescript.
We are going to now apply the logic of only activating this class for beginner courses and we are going
to do that in the following way.
We are going to access here because we are going to access the category property and we are going to
shake.
If the category property is equal to begin, then if that is the case, then the excess class is going
to be applied because we have here true.
Otherwise this is not going to be applied because we get false.
Let's see this in action.
If we know hit refresh, we are going to see that our beginner class is only being applied to certain
courses.
And if we confirm the courses that are receiving this first class here in our DB data file, we are
going to see that in these the first victim in their class.
On the least, it's these are SJS in practice course.
So the style is being correctly applied as expected.
Before giving a few more examples.
Let's take the time to remove this class here from our configuration object, because as mentioned,
we should only define here styles that are conditionally applied.
So this style is better applied here at the level of the class property.
Now, let's take a moment to see how these conditional staling logic could have been written in a simpler
way.
So returning a configuration object is only one possibility like we saw before.
So let's rewrite this so that we are returning steib a string.
So what we are going to do is we are going to arrive here and if clause we are going to test inside
this if clause, if this is a beginner course and if that's the case, we are going to return here either
an array containing the beginner string or we can also return the string.
The.
Let's start first with the example of an array.
We are going to try this example out and see if everything is working correctly.
So as you can see, the style is indeed being correctly applied and we don't get here any errors at
the level of the council.
So our logic is working correctly here instead of returning an array, because we only have one element,
we can also return here, a string directly.
And again, the logic is being correctly applied.
And with this we have covered the engie class core directive.
Let's quickly summarize, when is this directive meant to be used?
We should use Engler's whenever we want to add or remove a style to our template depending on the content
of the data.
Typically, we only use Engy class to add or remove a few styles per component.
Engie class is not meant to replace the excess class property.
So if the styles are constant and they are always associated to an HTML element, we should add them
in the Cyesis class property as usual.
Let's now move on to our next angular core directive engy style.