1 00:00:00,850 --> 00:00:02,000 Hello, everyone. 2 00:00:02,380 --> 00:00:10,360 So last lesson, we talked about how to add six class features to our project, so this lesson, we're 3 00:00:10,360 --> 00:00:13,300 going to talk about how to add style features. 4 00:00:14,030 --> 00:00:15,700 Everybody loves a good style. 5 00:00:17,680 --> 00:00:21,460 So let's just quickly see how to use style binding. 6 00:00:22,560 --> 00:00:27,540 So first up, I'll define a string value as color in the TS file. 7 00:00:29,200 --> 00:00:31,750 Now we use this value in the HTML file. 8 00:00:39,680 --> 00:00:45,650 What I'll do is I'll take these words into the spin and I want to use this word in a different color. 9 00:00:46,800 --> 00:00:50,760 So to do this will do some binding in the span tag. 10 00:00:51,480 --> 00:00:53,970 All right, style, color and square brackets. 11 00:00:54,960 --> 00:00:58,080 And equal the value from a component to this. 12 00:00:59,380 --> 00:01:02,920 Now, the color property of this label is equal to this value. 13 00:01:04,730 --> 00:01:09,740 And when we look at the browser, we see that the color of this word has changed. 14 00:01:11,800 --> 00:01:16,300 Now, we can also use this process depending on certain conditions. 15 00:01:16,330 --> 00:01:22,500 For example, we can compare the price of this product just as we did in the last lesson. 16 00:01:23,110 --> 00:01:26,860 We can also make this area have different colors according to the price. 17 00:01:30,890 --> 00:01:37,130 So this ended in here now, and I'll write it out, and when we look at it, we can see that the color 18 00:01:37,130 --> 00:01:39,980 changes according to different prices. 19 00:01:42,660 --> 00:01:47,490 All right, so now you see how to use style binding, there is a problem. 20 00:01:48,420 --> 00:01:54,480 Because when we use it in this way, we can do these operations for a single style. 21 00:01:55,630 --> 00:02:02,650 So if I want to change, like the font of this word, I won't be able to use a color property, right. 22 00:02:03,280 --> 00:02:04,900 So how do you solve that? 23 00:02:08,280 --> 00:02:12,780 We've got to figure out how to use multiple style features. 24 00:02:13,890 --> 00:02:14,330 You know. 25 00:02:16,100 --> 00:02:23,240 I'm just playing because I do so let's prepare a method that will return an object just like we prepared 26 00:02:23,240 --> 00:02:23,990 in the last lesson. 27 00:02:29,600 --> 00:02:34,160 But this method will give us the product according to the idea that we send. 28 00:02:38,550 --> 00:02:41,640 And here will change the font size and color. 29 00:02:42,540 --> 00:02:44,130 As the style feature. 30 00:02:45,320 --> 00:02:49,200 All right, so we use multiple properties here and returned it as an object. 31 00:02:50,200 --> 00:02:53,350 It's now it's time to use this method in our HTML5. 32 00:02:54,730 --> 00:02:57,730 So here we will use energy directive. 33 00:02:59,180 --> 00:03:01,070 All right, so just like the last lesson. 34 00:03:02,970 --> 00:03:07,350 We'll need energy directive to use more than one style. 35 00:03:09,840 --> 00:03:16,710 So, all right, engy style in square brackets, and we use our method with ID parameter. 36 00:03:22,750 --> 00:03:27,280 So when we look at the changes on the browser, we see that it has applied. 37 00:03:28,320 --> 00:03:29,670 Two different styles. 38 00:03:32,580 --> 00:03:35,790 So, my friends, that's how I make style changes. 39 00:03:37,000 --> 00:03:41,830 We saw some fixed changes as well as some dynamic style changes. 40 00:03:43,270 --> 00:03:44,410 Based on a condition. 41 00:03:45,810 --> 00:03:50,070 All right, so I want to see in the next lesson until then, bye for now.