In this lecture, we are going to discuss how angular treats courses in components.
You may be surprised.
Behind the scenes, angular treats component C assessed differently than Global C assess.
Being aware of these features will prevent you from running into problems.
Let's dive in.
We have two options for applying c ss to a component we can add c ss to the source slash styles access
file.
Styles added to this file reply globally to an app, however, we should add styles for a specific component
in its respective style sheet file.
For example, our post component has a CSV file called post-coup component that CIUSSS.
Styles created in a component success files are scoped.
What this means is that styles can only affect a components template.
Our styles cannot affect other components to better understand.
Let's look at an example.
Inside this file, let's select the image tag.
We will apply the width and height properties to the image, both properties will be set to 200.
Let's check out the app in the browser.
The image has been resized without a problem.
However, there's something else happening behind the scenes.
Let's inspect the element of the image.
And the developer tools, Angular has added a special attribute to the image tag.
It's an ID for preventing the styles from being applied to other images.
If you look to the right, the selector has changed to Angular has modified the selector to include
the custom attribute attached to the image tag by adding this ID.
It can adequately select the image tag without selecting other image tags.
Our success has been encapsulated if we have images in other components.
They won't be resized from this component styles.
This behavior is incredibly beneficial to us.
We never have to worry about having conflicting styles.
If we look back at the elements panel, we will notice something else.
The template is being wrapped with the custom component tag.
Our image is wrapped with the app post components.
Angular does not replace the component tag with the template.
Instead, it inserts the template into the tag.
In some cases, we may want to select the tag.
For example, we may want to select the app post component tag.
If we're going to apply styles to the app post tag from the Post Doc Component Access File, we will
need to use a special pseudo selector.
Switch back to the editor.
Let's say we want to increase the font size of all text inside the components.
Unfortunately, we can't select the elements inside the component with the app post selector.
Instead, we need to replace it with a pseudo selector called host.
This selector will tell Angular to apply these styles to the component tag wrapped around the templates
inside this selector.
Let's set the font size property to 24 X.
Refresh the page in the browser.
The caption we added to the image has been enlarged, even though it comes from the app component.
It's a part of the post component through content projection that wraps up this section.
We've learned so much about components.
Angular gives us everything we need to render data, handle events, communicate with other components
and apply stylings in the next section.
We're going to begin looking at how to dynamically change the output of our templates with directives
and pipes.
When you're ready, I'll see you there.