1 00:00:00,750 --> 00:00:02,310 Hello and welcome back, everyone. 2 00:00:02,670 --> 00:00:09,870 So in this lesson, we're going to talk about class binding so we can assign exercise classes to the 3 00:00:09,870 --> 00:00:16,610 elements in HTML according to certain situations, and we can do it in three different ways. 4 00:00:18,230 --> 00:00:24,200 So first, we're going to give a class value and a div, as we can see here, and we can equate this 5 00:00:24,200 --> 00:00:27,410 to a property or method from the component. 6 00:00:29,570 --> 00:00:35,660 Now, here we need to know if a class definition has been made for div before and then if a property 7 00:00:35,660 --> 00:00:43,550 or method is synchronized like this, delete the previously defined class expression and then the property 8 00:00:43,580 --> 00:00:45,740 we define will be added. 9 00:00:48,710 --> 00:00:54,650 Secondly, I want to use a class property of d'Hiv, and I want to link this feature to a method or 10 00:00:54,650 --> 00:00:55,760 property like this. 11 00:00:56,880 --> 00:01:03,750 So this class property can be properties like class, not online or class, not active. 12 00:01:05,680 --> 00:01:14,590 And thirdly, we can use the energy class when I want to use more than one class binding feature so 13 00:01:14,590 --> 00:01:17,590 we can use multiple classes using energy class. 14 00:01:20,360 --> 00:01:26,810 Now, here to I want to tell you, the values to be returned from engie class should be in the form 15 00:01:26,810 --> 00:01:27,680 of an object. 16 00:01:28,880 --> 00:01:35,720 So we can specify this with a class property that will add, for example, I'll show you here, we can 17 00:01:36,110 --> 00:01:38,390 add this class to a condition like this. 18 00:01:39,950 --> 00:01:46,230 So class properties may differ depending on whether the result is true or false. 19 00:01:47,750 --> 00:01:52,520 So in class asks for an object in Jason format. 20 00:01:53,950 --> 00:02:00,200 Then with the Anji class, we can add over existing classes without even touching them. 21 00:02:04,170 --> 00:02:09,930 So now let's see what I've been talking about this whole time, we'll build it into the application 22 00:02:11,010 --> 00:02:14,800 so we'll prepare a method in components file. 23 00:02:16,230 --> 00:02:20,400 So this method takes an idea as a parameter and returns a string value. 24 00:02:26,470 --> 00:02:30,040 Now, define a book variable, according to the ID that comes up. 25 00:02:41,150 --> 00:02:47,390 And I'll determine the classes that we will add according to the price of this incoming book. 26 00:03:07,110 --> 00:03:12,220 So the first class it will use when the result is true or if the result is false. 27 00:03:12,600 --> 00:03:14,370 The second class will be used. 28 00:03:14,520 --> 00:03:14,930 All right. 29 00:03:23,080 --> 00:03:28,900 It's now create a div inside the e-mail file, and here I'm writing class and square brackets. 30 00:03:32,420 --> 00:03:35,270 And I'll equate it to the method in the component. 31 00:03:45,010 --> 00:03:48,010 And naturally, I'll add the parameter here. 32 00:03:55,050 --> 00:04:02,790 As well as I'm going to be creating a Second d'Hiv and here I'll just be using a different parameter. 33 00:04:06,890 --> 00:04:11,360 All right, so now I've saved those changes and let's have a look in the browser. 34 00:04:15,780 --> 00:04:20,730 Now, you can see, according to the price comparison to different classes are used. 35 00:04:25,970 --> 00:04:29,420 So now let's say I want to add one more class here with this method. 36 00:04:32,810 --> 00:04:39,140 And look at this, when we say inspect in the browser, we see that this class we've added is used in 37 00:04:39,140 --> 00:04:40,130 both device. 38 00:04:42,950 --> 00:04:44,870 So why don't we create a button? 39 00:04:53,300 --> 00:04:58,340 So I'll define disabled class for this button and. 40 00:05:02,400 --> 00:05:04,310 Have created a passive button. 41 00:05:08,610 --> 00:05:14,940 And now what's going to be the condition, so to find a boolean value in the TS file? 42 00:05:20,330 --> 00:05:26,150 And in the e-mail file, make this definition just like on the previous. 43 00:05:37,300 --> 00:05:41,260 Usage, and when I look at the result in the browser. 44 00:05:41,830 --> 00:05:43,750 OK, class equals true. 45 00:05:48,490 --> 00:05:55,750 It's not what we want, though, is it, what we want here, using the disabled property of the class 46 00:05:55,750 --> 00:06:00,160 structure, right soil, right class, not disabled. 47 00:06:02,010 --> 00:06:05,820 OK, so now I can use this Seybold feature. 48 00:06:07,180 --> 00:06:13,720 And when we do that, false, disabled, removed, good job. 49 00:06:21,070 --> 00:06:27,160 So now I want to see how we can add new classes without deleting existing classes. 50 00:06:28,250 --> 00:06:28,970 What do you think? 51 00:06:30,070 --> 00:06:35,500 I'll show you this, I'll add a new field in the HTML file. 52 00:06:36,620 --> 00:06:40,280 And initially, I'll give class properties. 53 00:06:41,550 --> 00:06:45,210 All right, so now I can make some definitions like I did before. 54 00:06:46,680 --> 00:06:51,900 Now here as well, I'll define two different fields so we can see the difference. 55 00:06:53,870 --> 00:06:56,720 Now, let's create a new method in the text file. 56 00:06:58,070 --> 00:07:00,050 And this method will return an object. 57 00:07:01,460 --> 00:07:02,570 And look here. 58 00:07:09,360 --> 00:07:12,150 We can return individual results. 59 00:07:13,460 --> 00:07:17,030 So different result in different conditions. 60 00:07:18,360 --> 00:07:21,390 And that is how you prepare method, my friends. 61 00:07:46,470 --> 00:07:49,320 So now we can use this method in the HTML file. 62 00:07:51,190 --> 00:07:59,080 And of course, we will use the energy class structure here, it's now right the method and add parameters. 63 00:08:04,120 --> 00:08:05,920 And I'll do the same in the second of. 64 00:08:09,270 --> 00:08:16,220 Now, when I look at the browser, it occurs in two areas, and when I say inspect the classes that 65 00:08:16,220 --> 00:08:18,620 we used before are also here. 66 00:08:20,090 --> 00:08:25,850 All right, so now we've added the features that we wanted to without deleting the previous class structures, 67 00:08:26,450 --> 00:08:31,640 and we did all of that just by using engy class, very cool. 68 00:08:32,910 --> 00:08:39,180 All right, so that's class binding I want to see in the next Flessa, though, where it's even going 69 00:08:39,180 --> 00:08:40,000 to be more fun. 70 00:08:41,100 --> 00:08:41,850 Bye for now.