From the course: Angular Essential Training (2019)

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Working with global styles

Working with global styles - Angular Tutorial

From the course: Angular Essential Training (2019)

Start my 1-month free trial

Working with global styles

- 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…

Contents