Sample application for the Complete Angular Styling Guide
TypeScript JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
styles-app
.gitignore
README.md

README.md

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

Summary

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