Understand How to Style Angular Components

Last year I wrote an in depth article on how to conditionally style Angular components:

The article walks through different kind of possibilities Angular offers and helps decide which approach might be the best for your current scenario or use case.

This Egghead course “Understand How to Style Angular Components can be seen as a natural extension of that article. It should give you a complete overview of everything related to styling Angular components.

In 10 lessons we will take a look at how to..

1. Add styles to an Angular component
2. Use Angular style encapsulation to avoid styles from leaking into other components
3. Style HTML elements in Angular using the style property
4. Conditionally add a single CSS class to a DOM element in Angular
5. Style HTML elements in Angular using ngClass
6. Style HTML elements in Angular using ngStyle
7. Use Angular style sanitization to mark dynamic styles as trusted values
8. Use Angular’s @HostBinding and :host(…) to add styling to the component itself
9. Use :host-context and the /deep/ selector to apply context-based styling
10. Use the Renderer2 to add styles to an element in Angular

Enjoy the course :+1: and definitely let me know how you liked it or whether there is some more stuff you’d like to see in this specific course. Thanks 😊