Hello, everyone.
So last lesson, we talked about how to add six class features to our project, so this lesson, we're
going to talk about how to add style features.
Everybody loves a good style.
So let's just quickly see how to use style binding.
So first up, I'll define a string value as color in the TS file.
Now we use this value in the HTML file.
What I'll do is I'll take these words into the spin and I want to use this word in a different color.
So to do this will do some binding in the span tag.
All right, style, color and square brackets.
And equal the value from a component to this.
Now, the color property of this label is equal to this value.
And when we look at the browser, we see that the color of this word has changed.
Now, we can also use this process depending on certain conditions.
For example, we can compare the price of this product just as we did in the last lesson.
We can also make this area have different colors according to the price.
So this ended in here now, and I'll write it out, and when we look at it, we can see that the color
changes according to different prices.
All right, so now you see how to use style binding, there is a problem.
Because when we use it in this way, we can do these operations for a single style.
So if I want to change, like the font of this word, I won't be able to use a color property, right.
So how do you solve that?
We've got to figure out how to use multiple style features.
You know.
I'm just playing because I do so let's prepare a method that will return an object just like we prepared
in the last lesson.
But this method will give us the product according to the idea that we send.
And here will change the font size and color.
As the style feature.
All right, so we use multiple properties here and returned it as an object.
It's now it's time to use this method in our HTML5.
So here we will use energy directive.
All right, so just like the last lesson.
We'll need energy directive to use more than one style.
So, all right, engy style in square brackets, and we use our method with ID parameter.
So when we look at the changes on the browser, we see that it has applied.
Two different styles.
So, my friends, that's how I make style changes.
We saw some fixed changes as well as some dynamic style changes.
Based on a condition.
All right, so I want to see in the next lesson until then, bye for now.