Hello and welcome back, everyone.
So in this lesson, we're going to talk about class binding so we can assign exercise classes to the
elements in HTML according to certain situations, and we can do it in three different ways.
So first, we're going to give a class value and a div, as we can see here, and we can equate this
to a property or method from the component.
Now, here we need to know if a class definition has been made for div before and then if a property
or method is synchronized like this, delete the previously defined class expression and then the property
we define will be added.
Secondly, I want to use a class property of d'Hiv, and I want to link this feature to a method or
property like this.
So this class property can be properties like class, not online or class, not active.
And thirdly, we can use the energy class when I want to use more than one class binding feature so
we can use multiple classes using energy class.
Now, here to I want to tell you, the values to be returned from engie class should be in the form
of an object.
So we can specify this with a class property that will add, for example, I'll show you here, we can
add this class to a condition like this.
So class properties may differ depending on whether the result is true or false.
So in class asks for an object in Jason format.
Then with the Anji class, we can add over existing classes without even touching them.
So now let's see what I've been talking about this whole time, we'll build it into the application
so we'll prepare a method in components file.
So this method takes an idea as a parameter and returns a string value.
Now, define a book variable, according to the ID that comes up.
And I'll determine the classes that we will add according to the price of this incoming book.
So the first class it will use when the result is true or if the result is false.
The second class will be used.
All right.
It's now create a div inside the e-mail file, and here I'm writing class and square brackets.
And I'll equate it to the method in the component.
And naturally, I'll add the parameter here.
As well as I'm going to be creating a Second d'Hiv and here I'll just be using a different parameter.
All right, so now I've saved those changes and let's have a look in the browser.
Now, you can see, according to the price comparison to different classes are used.
So now let's say I want to add one more class here with this method.
And look at this, when we say inspect in the browser, we see that this class we've added is used in
both device.
So why don't we create a button?
So I'll define disabled class for this button and.
Have created a passive button.
And now what's going to be the condition, so to find a boolean value in the TS file?
And in the e-mail file, make this definition just like on the previous.
Usage, and when I look at the result in the browser.
OK, class equals true.
It's not what we want, though, is it, what we want here, using the disabled property of the class
structure, right soil, right class, not disabled.
OK, so now I can use this Seybold feature.
And when we do that, false, disabled, removed, good job.
So now I want to see how we can add new classes without deleting existing classes.
What do you think?
I'll show you this, I'll add a new field in the HTML file.
And initially, I'll give class properties.
All right, so now I can make some definitions like I did before.
Now here as well, I'll define two different fields so we can see the difference.
Now, let's create a new method in the text file.
And this method will return an object.
And look here.
We can return individual results.
So different result in different conditions.
And that is how you prepare method, my friends.
So now we can use this method in the HTML file.
And of course, we will use the energy class structure here, it's now right the method and add parameters.
And I'll do the same in the second of.
Now, when I look at the browser, it occurs in two areas, and when I say inspect the classes that
we used before are also here.
All right, so now we've added the features that we wanted to without deleting the previous class structures,
and we did all of that just by using engy class, very cool.
All right, so that's class binding I want to see in the next Flessa, though, where it's even going
to be more fun.
Bye for now.