Working with global styles - lordoftheflies/angular-essential-training GitHub Wiki

By default Angular uses the emulated view encapsulation mode to scope components CSS, to component specific markup. You can make use of that to write styling specific to each component. You can also make use of global CSS to leverage styling across different components. Looking at the application in the browser, we can see that the list of unique category names for each media item set has a distinct look to each item, but in the display of a single media item, the category name is just plain text. We can make use of a global CSS style in the Angular application to provide a consistent look to all category name labels, regardless of what component they are rendered from. Over in the code in the category-list.component.ts file We can see there as a CSS selector for label a CSS class name and in the template markup we see the class being used on the span element. Since this CSS selector lives in the component CSS and the default view encapsulation mode of emulated is being used. Angular will shim this to scope it only two elements in the mw-category-list elements of type span. Let's refactor this code to move that .label selector up to the global CSS. So it can work on all elements in a document markup that have a CSS class of label. So we can start by cutting out this .label CSS block, and then open up the styles.CSS file found in the SRC folder, right above the app folder. This file is used by the Angular CLI as the global styles file and will get included in the Angular application run in the browser without any shimming done to its contents. We can paste that .label CSS block in here. The next thing we need to do is add the label class to the element that renders the media item. Let's open up the media-item.component.html file and in that markup, let's add the class attribute to the element where it is rendering out the media item.category via the template literal syntax and set that equal to a value of label. While we are working on the media item styling let's make use of the special colon host-context, pseudo selector to ensure that these labels in here get the matching color just like the category list component ones. So over in the media-item.component.CSS file let's add a colon host-context selector for .medium-movies and .label and set the background color to the movies color, and let's add one for .medium-series and .label, and set that to the series color. With that, we have both the category list component markup and the media item component markup using this label CSS class and have placed the CSS selector block for the CSS label class at the global CSS level. So Angular will render it as is without any shim and the browser will handle the rest. Let's switch over to the browser and we can see the category name labels in the individual media item displays look like the labels in the category list above. So, global CSS is supported in Angular applications and works in the same way as a standard web application and we can make use of those style selectors and rules that are defined at a global level within our components, and they will work in harmony with the view encapsulation emulated mode that Angular provides for scoping styling in components.