Sample application for the Complete Angular Styling Guide
Switch branches/tags
Nothing to show
Clone or download
Latest commit fd5fd3e Jul 17, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
styles-app Angular Component Styling Guide - sample application Jul 17, 2017
.gitignore Angular Component Styling Guide - sample application Jul 6, 2017 Update Jul 17, 2017

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