This is the support code for the following blog post:

Angular Component Styling Complete Guide - ngClass, ngStyle, :host, :host-context, ::ng-deep, Style Debugging

In this post, we are going to learn the many options that we have available for styling our Angular components.

We will talk about when to use each feature and why, and also cover how to debug our styles if something is not working.

We will learn how the default Angular styling mechanism (Emulated Encapsulation) works under the hood, and we will also cover the Sass support of the Angular CLI, and some best practices for how to leverage the many Sass features available.

This post will cover the following topics:

• Component Styling using ngClass - when to use it and when to use other alternatives?
• ngClass support for Arrays, strings of classes, configuration objects
• ngClass support for component functions
• ngStyle features
• Angular Style Isolation - How does it work?
• Debugging Angular Styles
• The :host modifier, when to use it and why
• The :host-context modifier, common use cases for theming
• The ::ng-deep modifier - common use cases (and upcoming deprecation)
• How To style projected content
• Angular CLI CSS Preprocessors support - Sass, Less and Stylus
• How can we use Sass to improve our styles
• Conclusions and Recommendations