Skip to content
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.

Angular Component Styling - The Complete Guide support Code

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.

Table Of Contents

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


Sample application for the Complete Angular Styling Guide



No releases published


No packages published