Using common CSS selectors - lordoftheflies/angular-essential-training GitHub Wiki

With Angular's emulated view encapsulation mode, you're able to write CSS for components that is automatically scoped to the component template without needing to craft the CSS in a unique or custom way. You can write common CSS selectors and target markup within the component template. Let's take a look at how this can be done by styling a component in the app. For this lesson, the project code has already been updated to refactor the category list display to use a new component named category list component. The markup that was in the media item list component template has been altered to make use of this new component as well as some changes to the category pipe that was returning a single string of comma-separated category names to instead return an array of those names that is used by the new category list component. This component is using an inline template and is set up for some inline CSS. Let's implement some common CSS selectors here to add some styling for the category list. Now, we won't go into detail here on the actual CSS rules that we will add as that is outside the scope of this course. So don't worry too much about the specific stylings being created, and feel free to focus on how the CSS selectors map up with the component template markup and how Angular allows us to write component-scoped CSS. Okay, this category list component will render out a span tag for each category name. We can create a new CSS selector in the style string named span. And let's give it some style rules. We want these category labels to line up left to right, so we'll give them a display property of inline block. And let's use some margin values to space them out. A margin right of four pixels and a margin bottom of four pixels in case they wrap into a new line in the display. Note that we can use a simple selector here like span and not have to worry about the style affecting every span element in the final document output, because Angular will be applying the shim in emulated mode adding a unique attribute to the markup and the CSS selector to ensure that it is scoped to only this component template. So we are using this span selector rule set to style how these elements will get positioned in this component. Let's make use of a CSS class to declare how each one will look, their visual representation. We can create a new CSS selector for a class named label with the syntax .label. And in the rule set for it, let's defined things like background color, text color, give it some rounded corners, some padding, and make the text italic, and set the width to max content so the label background is the size of the text. In the template string value, let's add the class attribute onto the span element and set that equal to the label string name. In the template string value, we already have the class label on the span element. Just like the span selector, Angular will shim this .label selector to make use of the unique attribute it adds to scope this CSS selector rule to only the spans within this component template render. So these styles won't get applied to other elements in the document that have the class value of label. Over in the browser, we can see the category list being rendered with the new styling, the background color, and rounded corners, and the spacing between each one. And if we bring up the browser context menu on one of these and choose inspect, in the dev tools elements tab, we can see the span element with the shimmed attribute on it. And over in the styles tab in the dev tools, we can see the styles applied. The label class is there, and so is the span, both with the brackets and the unique attributes shim value. The emulated view encapsulation mode provided by Angular allows you to write common CSS for your components without needing complex selector values to scope it to specific markup elements. And remember, this is the default configuration for components, so you can take advantage of this approach in your component CSS in a default Angular application without having to configure anything additional.