1
00:00:00,360 --> 00:00:05,850
In this lecture, we are going to discuss how angular treats courses in components.

2
00:00:06,090 --> 00:00:07,380
You may be surprised.

3
00:00:07,650 --> 00:00:12,990
Behind the scenes, angular treats component C assessed differently than Global C assess.

4
00:00:13,320 --> 00:00:17,370
Being aware of these features will prevent you from running into problems.

5
00:00:17,550 --> 00:00:18,570
Let's dive in.

6
00:00:19,110 --> 00:00:28,440
We have two options for applying c ss to a component we can add c ss to the source slash styles access

7
00:00:28,440 --> 00:00:28,980
file.

8
00:00:31,450 --> 00:00:39,160
Styles added to this file reply globally to an app, however, we should add styles for a specific component

9
00:00:39,160 --> 00:00:41,470
in its respective style sheet file.

10
00:00:41,830 --> 00:00:49,360
For example, our post component has a CSV file called post-coup component that CIUSSS.

11
00:00:51,830 --> 00:00:56,000
Styles created in a component success files are scoped.

12
00:00:56,270 --> 00:01:00,830
What this means is that styles can only affect a components template.

13
00:01:01,190 --> 00:01:05,450
Our styles cannot affect other components to better understand.

14
00:01:05,540 --> 00:01:07,100
Let's look at an example.

15
00:01:07,340 --> 00:01:10,850
Inside this file, let's select the image tag.

16
00:01:13,390 --> 00:01:20,020
We will apply the width and height properties to the image, both properties will be set to 200.

17
00:01:22,520 --> 00:01:24,820
Let's check out the app in the browser.

18
00:01:27,260 --> 00:01:29,930
The image has been resized without a problem.

19
00:01:30,110 --> 00:01:33,470
However, there's something else happening behind the scenes.

20
00:01:33,680 --> 00:01:36,110
Let's inspect the element of the image.

21
00:01:38,610 --> 00:01:44,220
And the developer tools, Angular has added a special attribute to the image tag.

22
00:01:44,520 --> 00:01:49,110
It's an ID for preventing the styles from being applied to other images.

23
00:01:49,440 --> 00:01:56,640
If you look to the right, the selector has changed to Angular has modified the selector to include

24
00:01:56,640 --> 00:02:01,670
the custom attribute attached to the image tag by adding this ID.

25
00:02:02,310 --> 00:02:07,410
It can adequately select the image tag without selecting other image tags.

26
00:02:07,680 --> 00:02:13,050
Our success has been encapsulated if we have images in other components.

27
00:02:13,290 --> 00:02:16,620
They won't be resized from this component styles.

28
00:02:16,950 --> 00:02:19,920
This behavior is incredibly beneficial to us.

29
00:02:20,190 --> 00:02:23,700
We never have to worry about having conflicting styles.

30
00:02:24,270 --> 00:02:28,320
If we look back at the elements panel, we will notice something else.

31
00:02:28,650 --> 00:02:32,460
The template is being wrapped with the custom component tag.

32
00:02:32,820 --> 00:02:36,150
Our image is wrapped with the app post components.

33
00:02:36,600 --> 00:02:40,350
Angular does not replace the component tag with the template.

34
00:02:40,710 --> 00:02:44,220
Instead, it inserts the template into the tag.

35
00:02:44,700 --> 00:02:48,150
In some cases, we may want to select the tag.

36
00:02:48,420 --> 00:02:53,100
For example, we may want to select the app post component tag.

37
00:02:53,430 --> 00:03:00,930
If we're going to apply styles to the app post tag from the Post Doc Component Access File, we will

38
00:03:00,930 --> 00:03:03,330
need to use a special pseudo selector.

39
00:03:03,600 --> 00:03:05,160
Switch back to the editor.

40
00:03:07,730 --> 00:03:12,650
Let's say we want to increase the font size of all text inside the components.

41
00:03:12,980 --> 00:03:19,280
Unfortunately, we can't select the elements inside the component with the app post selector.

42
00:03:21,730 --> 00:03:26,230
Instead, we need to replace it with a pseudo selector called host.

43
00:03:28,810 --> 00:03:35,230
This selector will tell Angular to apply these styles to the component tag wrapped around the templates

44
00:03:35,620 --> 00:03:37,180
inside this selector.

45
00:03:37,330 --> 00:03:41,440
Let's set the font size property to 24 X.

46
00:03:43,950 --> 00:03:45,930
Refresh the page in the browser.

47
00:03:48,510 --> 00:03:54,360
The caption we added to the image has been enlarged, even though it comes from the app component.

48
00:03:54,540 --> 00:04:00,810
It's a part of the post component through content projection that wraps up this section.

49
00:04:00,990 --> 00:04:03,360
We've learned so much about components.

50
00:04:03,690 --> 00:04:10,170
Angular gives us everything we need to render data, handle events, communicate with other components

51
00:04:10,170 --> 00:04:13,110
and apply stylings in the next section.

52
00:04:13,260 --> 00:04:19,380
We're going to begin looking at how to dynamically change the output of our templates with directives

53
00:04:19,380 --> 00:04:20,070
and pipes.

54
00:04:20,339 --> 00:04:22,380
When you're ready, I'll see you there.