1 00:00:04,480 --> 00:00:09,810 Hello, everyone, and welcome back in these lessons, we're going to start to talk about components, 2 00:00:09,810 --> 00:00:15,550 styling, and we're going to introduce the Engy Class Core Directive, as we have seen before. 3 00:00:15,670 --> 00:00:21,710 Many of the styles that we are using here are coming here from these global styles, dot cyesis file. 4 00:00:21,880 --> 00:00:27,190 We can also add styles locally at the level of the component, as we will see right now. 5 00:00:27,190 --> 00:00:31,860 Let's talk about the particular type of styles which are conditional styles. 6 00:00:32,110 --> 00:00:37,700 These are styles that are added to sections of the page, depending on the content of the data. 7 00:00:37,990 --> 00:00:44,290 So unlike the styles that we have here, such as, for example, the course of class, there could be 8 00:00:44,290 --> 00:00:52,120 a class that is added here to our course cart depending on if, for example, the course is of category 9 00:00:52,120 --> 00:00:53,630 beginner or not. 10 00:00:53,680 --> 00:00:57,910 Let's now go ahead and add such a conditional class to our component. 11 00:00:58,090 --> 00:01:04,090 We're going to have it directly here at the level of the component Cyesis file itself, which is currently 12 00:01:04,090 --> 00:01:04,690 empty. 13 00:01:04,720 --> 00:01:10,960 We are going to first start by writing our Cyesis selector and what we are going to target is this container 14 00:01:10,960 --> 00:01:14,620 deve here that is wrapping the whole course card component. 15 00:01:14,830 --> 00:01:21,490 Let's then create a style that targets any element that has applied this course card class and let's 16 00:01:21,490 --> 00:01:25,120 have here an exercise class beginner. 17 00:01:25,450 --> 00:01:30,610 So these Cyesis class is also known as a state class. 18 00:01:31,000 --> 00:01:35,470 These type class is going to be applied only to courses of type Biggin. 19 00:01:35,470 --> 00:01:39,570 Then let's make these beginner class very visible in our screen. 20 00:01:39,580 --> 00:01:43,750 We are going to have here a bright colors such as, for example, this one. 21 00:01:44,020 --> 00:01:47,710 And let's try these out to see if this style is working correctly. 22 00:01:47,710 --> 00:01:53,980 So if we head over here to our course car component, let's quickly adhere to the beginner courses class 23 00:01:53,980 --> 00:01:58,990 and see that indeed we can very quickly spot a curve with this style. 24 00:01:59,140 --> 00:02:03,760 But the style, as we can see here, is being applied to all the cards. 25 00:02:04,000 --> 00:02:07,080 We want to apply it only to certain courses. 26 00:02:07,360 --> 00:02:14,920 Let's then start by removing here the courses class and see how can we apply styles using INGLĘS instead 27 00:02:14,920 --> 00:02:15,400 of engie. 28 00:02:15,400 --> 00:02:19,130 Class is a core directive that comes bundled with angular. 29 00:02:19,510 --> 00:02:25,960 So with Engie Class Directive, we're going to be able to pass an that argument that is going to turn 30 00:02:25,960 --> 00:02:28,780 on or off certain courses classes. 31 00:02:28,900 --> 00:02:33,910 The expression that we pass in here to engie class can take several forms. 32 00:02:33,910 --> 00:02:42,160 We can pass to energy class A string, we can pass also an array and we can also pass it a configuration 33 00:02:42,160 --> 00:02:42,720 object. 34 00:02:43,060 --> 00:02:45,430 Let's explore the three possibilities. 35 00:02:45,610 --> 00:02:52,420 Let's see, for example, how can we pass a class that we want to activate using a string? 36 00:02:52,780 --> 00:02:58,380 We can do so by passing in the string here and passing the beginner cyesis class. 37 00:02:58,690 --> 00:03:06,340 So as you can see, the string that gets received gets interpretive access and the sixth class is added 38 00:03:06,340 --> 00:03:07,220 to the page. 39 00:03:07,390 --> 00:03:08,620 Now notice one thing. 40 00:03:08,620 --> 00:03:13,210 This string does not have to contain only one Cyesis class. 41 00:03:13,510 --> 00:03:19,270 We could potentially have here several Cyesis classes separated by a space. 42 00:03:19,540 --> 00:03:25,330 So if we try this out, you can see that the style has remained unchanged and our cards look the same 43 00:03:25,330 --> 00:03:26,000 as before. 44 00:03:26,230 --> 00:03:31,960 It's not recommended to apply these type of styles that are constant using engy class. 45 00:03:32,470 --> 00:03:36,970 These type of styles are better applied using the Sears's class property. 46 00:03:37,210 --> 00:03:43,780 As usual, engy class is really meant only for conditional styles and other thing that we can pass to 47 00:03:43,780 --> 00:03:48,940 engie class instead of a string is an array so we can pass them here. 48 00:03:48,960 --> 00:03:56,670 An array of strings containing a list of all the Cyesis classes that we want to apply to a given element. 49 00:03:56,710 --> 00:04:03,520 So again, if we pass in here these two Cyesis classes, we are going to see that they are being correctly 50 00:04:03,520 --> 00:04:06,850 applied here to our template as expected. 51 00:04:06,880 --> 00:04:11,650 Another thing that we can pass to Engie Class is a configuration object. 52 00:04:11,890 --> 00:04:19,630 So instead of passing a string or an array of strings, we can instead pass in here an object whose 53 00:04:19,779 --> 00:04:27,790 properties are the names of the asset classes that we want to apply and whose values are true or false, 54 00:04:28,120 --> 00:04:31,730 depending on if we want to apply the style or not. 55 00:04:32,140 --> 00:04:35,500 So as we can see, our styles are still working as expected. 56 00:04:35,500 --> 00:04:42,130 But if we now sit here, the beginner class to false, we are going to see that the beginner class is 57 00:04:42,130 --> 00:04:44,800 no longer being applied to the template. 58 00:04:44,920 --> 00:04:47,230 Now notice the following about inkless. 59 00:04:47,440 --> 00:04:55,210 We don't have to pass in here as the expression has to inject less directly an object that is hardcoded 60 00:04:55,210 --> 00:04:57,160 here at the level of the template. 61 00:04:57,490 --> 00:04:59,890 Instead, what we can do is we can. 62 00:05:00,620 --> 00:05:04,620 A function that returns as this configuration object. 63 00:05:04,970 --> 00:05:09,980 This is actually the recommended approach in order to keep the template readable. 64 00:05:09,980 --> 00:05:14,480 So we are going to call here a new method called karaba classes. 65 00:05:14,720 --> 00:05:18,830 And we're going to create this new method here at the level of our component. 66 00:05:19,130 --> 00:05:25,710 So this method is going to return to the template, the same thing that we were returning before. 67 00:05:25,730 --> 00:05:28,010 Let's start here with a simple example. 68 00:05:28,250 --> 00:05:35,150 We are going to return here a configuration object, which was the last example that we gave notice 69 00:05:35,150 --> 00:05:41,720 that this method could also return a string or an array of strings like we have seen before. 70 00:05:41,780 --> 00:05:45,240 Those are also accepted by engie class. 71 00:05:45,290 --> 00:05:48,800 So if we try this out, we are going to see that again. 72 00:05:48,800 --> 00:05:53,600 We still have here the correct styles applied if we return here to the valley. 73 00:05:53,610 --> 00:05:54,110 True. 74 00:05:54,110 --> 00:05:58,840 We are going to see that now at the beginning of the class is being applied as expected. 75 00:05:59,150 --> 00:06:06,610 So this is a better way of adding some conditional styling to our class to call a method and adhere 76 00:06:06,630 --> 00:06:08,610 to our logic in typescript. 77 00:06:08,900 --> 00:06:15,260 We are going to now apply the logic of only activating this class for beginner courses and we are going 78 00:06:15,260 --> 00:06:17,060 to do that in the following way. 79 00:06:17,570 --> 00:06:24,470 We are going to access here because we are going to access the category property and we are going to 80 00:06:24,620 --> 00:06:25,400 shake. 81 00:06:25,610 --> 00:06:33,230 If the category property is equal to begin, then if that is the case, then the excess class is going 82 00:06:33,230 --> 00:06:35,390 to be applied because we have here true. 83 00:06:35,630 --> 00:06:39,200 Otherwise this is not going to be applied because we get false. 84 00:06:39,200 --> 00:06:40,460 Let's see this in action. 85 00:06:40,670 --> 00:06:46,220 If we know hit refresh, we are going to see that our beginner class is only being applied to certain 86 00:06:46,220 --> 00:06:46,910 courses. 87 00:06:47,090 --> 00:06:54,740 And if we confirm the courses that are receiving this first class here in our DB data file, we are 88 00:06:54,740 --> 00:06:57,710 going to see that in these the first victim in their class. 89 00:06:57,710 --> 00:07:01,540 On the least, it's these are SJS in practice course. 90 00:07:01,700 --> 00:07:04,790 So the style is being correctly applied as expected. 91 00:07:04,880 --> 00:07:06,830 Before giving a few more examples. 92 00:07:06,830 --> 00:07:12,680 Let's take the time to remove this class here from our configuration object, because as mentioned, 93 00:07:12,710 --> 00:07:16,700 we should only define here styles that are conditionally applied. 94 00:07:16,970 --> 00:07:21,620 So this style is better applied here at the level of the class property. 95 00:07:21,770 --> 00:07:27,500 Now, let's take a moment to see how these conditional staling logic could have been written in a simpler 96 00:07:27,500 --> 00:07:27,910 way. 97 00:07:27,950 --> 00:07:33,550 So returning a configuration object is only one possibility like we saw before. 98 00:07:33,860 --> 00:07:39,010 So let's rewrite this so that we are returning steib a string. 99 00:07:39,290 --> 00:07:44,870 So what we are going to do is we are going to arrive here and if clause we are going to test inside 100 00:07:44,870 --> 00:07:51,770 this if clause, if this is a beginner course and if that's the case, we are going to return here either 101 00:07:51,770 --> 00:07:57,230 an array containing the beginner string or we can also return the string. 102 00:07:57,230 --> 00:07:57,320 The. 103 00:07:57,570 --> 00:08:00,160 Let's start first with the example of an array. 104 00:08:00,200 --> 00:08:05,150 We are going to try this example out and see if everything is working correctly. 105 00:08:05,150 --> 00:08:11,450 So as you can see, the style is indeed being correctly applied and we don't get here any errors at 106 00:08:11,450 --> 00:08:12,620 the level of the council. 107 00:08:12,620 --> 00:08:18,110 So our logic is working correctly here instead of returning an array, because we only have one element, 108 00:08:18,320 --> 00:08:21,650 we can also return here, a string directly. 109 00:08:21,860 --> 00:08:25,070 And again, the logic is being correctly applied. 110 00:08:25,160 --> 00:08:28,540 And with this we have covered the engie class core directive. 111 00:08:28,550 --> 00:08:32,360 Let's quickly summarize, when is this directive meant to be used? 112 00:08:32,720 --> 00:08:40,070 We should use Engler's whenever we want to add or remove a style to our template depending on the content 113 00:08:40,070 --> 00:08:41,010 of the data. 114 00:08:41,210 --> 00:08:46,730 Typically, we only use Engy class to add or remove a few styles per component. 115 00:08:46,940 --> 00:08:52,120 Engie class is not meant to replace the excess class property. 116 00:08:52,340 --> 00:08:59,210 So if the styles are constant and they are always associated to an HTML element, we should add them 117 00:08:59,210 --> 00:09:02,290 in the Cyesis class property as usual. 118 00:09:02,390 --> 00:09:07,550 Let's now move on to our next angular core directive engy style.