1
00:00:04,090 --> 00:00:06,080
Hello, everyone, and welcome back.

2
00:00:06,520 --> 00:00:11,260
In this lesson, we're going to talk about the angular engie style called directive.

3
00:00:11,510 --> 00:00:18,610
So as we have seen in the last lesson, we can use glass to add Cyesis glasses to our component conditionally

4
00:00:18,940 --> 00:00:25,060
depending on the value of the course data, for example, the same way that we want to add Cyesis glasses

5
00:00:25,060 --> 00:00:25,650
conditionally.

6
00:00:25,840 --> 00:00:30,010
We might also want to add Cyesis styles directly.

7
00:00:30,220 --> 00:00:36,760
Most of the time we are going to be able to style our components by simply using plain Cyesis glasses

8
00:00:36,760 --> 00:00:37,780
and nothing more.

9
00:00:37,930 --> 00:00:43,250
But there are occasions where we would like to apply a style directly to a component.

10
00:00:43,270 --> 00:00:49,750
Let's then quickly apply a style to one of these elements and see how styling works without using energy

11
00:00:49,750 --> 00:00:50,110
style.

12
00:00:50,140 --> 00:00:53,950
First, let's say that, for example, we would like to make this text here.

13
00:00:53,950 --> 00:00:56,340
The title of the card underlined.

14
00:00:56,350 --> 00:00:59,260
We can do that using the input template syntax.

15
00:00:59,260 --> 00:01:04,310
In the following way, we are going to access the style properties of our element.

16
00:01:04,569 --> 00:01:06,550
So this is a DOM property.

17
00:01:06,580 --> 00:01:14,800
This is not angular specific and we are going to write into it a value under the text decoration property.

18
00:01:15,040 --> 00:01:22,660
So we are going to see that the text decoration style element of this course title div here is going

19
00:01:22,660 --> 00:01:24,810
to have the value underlined.

20
00:01:25,270 --> 00:01:32,080
So if we refresh here our application, we are going to see that now all the cards have here an underlying

21
00:01:32,090 --> 00:01:32,800
title.

22
00:01:32,980 --> 00:01:39,160
Now imagine that instead of only one style, we would like to apply multiple styles to this div.

23
00:01:39,280 --> 00:01:43,630
So we will have to use multiple times this syntax, one for each style.

24
00:01:43,990 --> 00:01:50,980
A more convenient way of applying multiple styles to an element is to using STEIB, the engie style

25
00:01:50,980 --> 00:01:51,720
directive.

26
00:01:51,970 --> 00:01:58,060
So we are going to be using again the input syntax, but this time we are using engy style.

27
00:01:58,390 --> 00:02:05,170
Engie style is going to take here on the right hand side of a configuration object whose properties

28
00:02:05,170 --> 00:02:07,430
are the styles that we want to modify.

29
00:02:07,450 --> 00:02:15,130
So in this case, we want to modify the text decoration property and whose values are the value of the

30
00:02:15,130 --> 00:02:16,310
property itself.

31
00:02:16,330 --> 00:02:23,710
So in this case, we want to set decoration to underline and if we would like to add here multiple other

32
00:02:23,710 --> 00:02:29,760
styles, we can do so via this configuration object by providing here multiple properties.

33
00:02:29,920 --> 00:02:34,610
So as you can see, the underlying is still being applied here to our current title.

34
00:02:35,080 --> 00:02:40,150
Now, we can also pass here an expression to engy style like it happened here.

35
00:02:40,150 --> 00:02:46,810
In the case of inkless, we can in a similar way call here a function that we are going to be creating

36
00:02:46,810 --> 00:02:49,070
here at the level of our component.

37
00:02:49,330 --> 00:02:57,220
This function can return a configuration object just like we did for Engy class, so we can return here

38
00:02:57,520 --> 00:02:59,530
our configuration object.

39
00:02:59,680 --> 00:03:05,260
And if we try this out, we are going to see that everything is still working just like before.

40
00:03:05,650 --> 00:03:12,790
But this makes it much simpler to turn on and off certain styles programmatically here at the level

41
00:03:12,790 --> 00:03:17,290
of the template as we have access here to the course input object.

42
00:03:17,470 --> 00:03:20,860
Notice that we could also access the object here.

43
00:03:21,220 --> 00:03:28,300
But if we start adding too much logic to our template, then the template becomes less readable.

44
00:03:28,300 --> 00:03:34,630
Instead of adding too much logic here, it's better to simply call a function at the level of our component

45
00:03:34,840 --> 00:03:37,950
and implement here our logic in typescript.

46
00:03:37,960 --> 00:03:43,840
And just like it happened before, in the case of Engie Class, we really want to avoid to have constant

47
00:03:43,840 --> 00:03:44,650
values here.

48
00:03:44,860 --> 00:03:51,730
We should only define here styles using engy style for properties that are dynamic and depend on the

49
00:03:51,730 --> 00:03:53,060
content of the data.

50
00:03:53,290 --> 00:03:55,000
Let's give here a quick example.

51
00:03:55,180 --> 00:04:01,300
Imagine that instead of displaying here the coarse image using the image tag, we would like to display

52
00:04:01,300 --> 00:04:06,050
the image as a Sears's backgrounds of these Karith here.

53
00:04:06,280 --> 00:04:09,790
So in order to do that, we will need the following Cyesis property.

54
00:04:09,790 --> 00:04:13,150
We will need to set back around that image.

55
00:04:13,300 --> 00:04:20,110
So this is a thesis property that can be applied to any div that is going to apply a given image as

56
00:04:20,110 --> 00:04:22,320
the background of a section of the page.

57
00:04:22,630 --> 00:04:29,320
In order for this to work, we need to call you Warrell and we need to pass in here a complete neutral

58
00:04:29,320 --> 00:04:37,000
to the image that we want to use as background so we can concatenate here the icon Eurail of our course,

59
00:04:37,000 --> 00:04:43,630
for example, and we could have here multiple other dynamic properties if needed before trying this

60
00:04:43,630 --> 00:04:43,890
out.

61
00:04:43,900 --> 00:04:45,970
Let's switch back here to our example.

62
00:04:46,360 --> 00:04:50,890
We were accidentally applying here, our styles here only to the title.

63
00:04:51,190 --> 00:04:55,840
We want to instead apply these new dynamic style to the complete cad.

64
00:04:56,170 --> 00:04:57,610
So we will now try this out.

65
00:04:57,610 --> 00:05:00,040
We are going to see that our DB is.

66
00:05:00,130 --> 00:05:07,630
Receiving as its background, the course image as intended, as you can see, there are a lot of options

67
00:05:07,630 --> 00:05:09,490
for styling our components.

68
00:05:09,760 --> 00:05:16,690
Let's put wackier our image and quickly discuss the multiple options that we have available for styling

69
00:05:16,690 --> 00:05:17,890
our components.

70
00:05:18,280 --> 00:05:25,510
So most of the times we want to style our components with plain Cyesis glasses, such as the one that

71
00:05:25,510 --> 00:05:29,380
we have here that is the most common way of styling our components.

72
00:05:29,590 --> 00:05:34,150
We should not use systematically engie glass or engy style.

73
00:05:34,150 --> 00:05:41,530
Engie glass should be used a lot more frequently than engy style, and glass is meant for conditionally

74
00:05:41,530 --> 00:05:45,590
adding or removing glasses depending on the content of our data.

75
00:05:45,700 --> 00:05:53,680
So typically we want to use engy glass only for cyesis state glasses that indicate the presence of a

76
00:05:53,680 --> 00:05:55,750
given state in our component.

77
00:05:55,870 --> 00:06:01,960
On the other hand, sometimes there are certain Cyesis properties that we want to populate depending

78
00:06:01,960 --> 00:06:07,950
on the data and example of the type of property is the background image property as we have seen.

79
00:06:08,290 --> 00:06:15,160
So if we ran into that case, when we want to set a particular S.O.S property with data dependent content

80
00:06:15,430 --> 00:06:17,710
for that, we can use engy style.

81
00:06:17,920 --> 00:06:22,610
We are going to learn still a lot more about styling in the next few sections.

82
00:06:22,630 --> 00:06:27,100
Right now, let's continue covering the main angular core directive's.

83
00:06:27,280 --> 00:06:29,410
Let's talk about Engy Switch.