2.4 Component Styling

Hello folks, in this lesson, we're going to take a quick look at how component styling works by adding some basic style for the home component that we created in the last lesson. The directory for the home component already contains a SAS file ready for us to use. So let's open it up and add some styles there. So, we've added some basic styling there, it's very minimal. I think you'll agree that it's clear I'm not a designer. In any case, we've added some simple CSS here for the two elements inside our component, with some basic styles. So, as soon as we save this file, as we have just done, the app should reload and we should see a visual change to the page. As you can see, it looks quite different than it did just a moment ago. So, let's inspect the head of the page now. So, we can see that there are some style elements that have been added to the page here. So one of these will be the gravel styling, and that's currently empty because we haven't added any global styles, yet. So let's open up the second style tag and we can see the styles that we've just written have been applied here. Let's say that the styles only effect the home component, and nothing else on the page. The elements have been given these NG content attributes, and our CSS has been scoped to our component using these attributes. And if we go down and look at the page itself, we can see that the header inside our App Home component has the appropriate attributes to pick up the styling that we've just added. So this is really, really awesome, it helps components keep nice and encapsulated. It makes sure that the CSS from one component doesn't affect the CSS for a different component. This really helps keep the CSS for our app maintainable. So don't forget the Angular does need to be told about this component style sheet. And if that occurs in the configuration objects passed through the component decorator in the component subscript file. So in this lesson we saw that we can add highly specific component styling which is scoped just to a particular component using the SAS file that the Angular CLI adds when we create a new component or in this case when we originally scaffolded the application. We saw that the styles that we add in a component stylesheet get injected into the head of the page using a style element, and this will occur on any page that the component is used on. Thanks for watching.