Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Angular is a popular front-end framework made by Google. Like other popular front-end frameworks, it uses a component-based architecture to structure apps.

In this article, we’ll look at ways to style Angular components.

Component Styles

Angular components are styled with CSS. Everything about CSS applies to Angular components.

We can also compound component styles with components, which allows for more modular designs than regular stylesheets.

Using Component Styles

We can define CSS styles in addition to template content in our components.

One way to do it is to use the styles property in our component.

For example, we can write that as follows:

app.component.ts :

import { Component } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styles: [  
    `  
      h1 {  
        font-size: 50px;  
      }  
    `  
  ]  
})  
export class AppComponent {}

app.component.html :

<h1>Foo</h1>

Then we should see ‘Foo’ that’s 50 pixels big on the screen.

Styles in styles isn’t inherited by any components nested within the template or any content projected into the component.

We can use CSS class names and selectors that make the most sense in each component.

Class names and selectors don’t collide with class names and selectors in other parts of the app.

Changes elsewhere in the app don’t affect changes in the current component.

We can co-locate the CSS code of each component with TypeScript and HTML code of the component, which makes the project structure cleaner.

Also, we can change or remove CSS code without searching through the whole app to find where else the code is used.

Special Selectors

Angular apps can use special selectors to style components.

They come from selectors for styling the shadow DOM.

:host

The :host pseudoclass selector targets styles in the element that hosts the component rather than the elements inside the component’s template.

For example, we can write:

:host {  
  display: block;  
  border: 3px solid black;  
}

We can style host styles with the given selector by using the function form as follows:

:host(.active) {  
  border-width: 1px;  
}

:host-context

We can use :host-context to apply styles on some condition outside of a component’s view.

It works the same way as the :host selector, which can use the function form.

It’ll look in ancestor components all the way up to the document root for the given selector.

For example, we can write:

:host-context(.theme-light) h2 {  
  background-color: #fff;  
}

/deep/, >>>, and ::ng-deep (Deprecated)

We can use /deep/, >>>, and ::ng-deep to apply styles to outside of the component by disabling view encapsulation for the rule.

For example, we can write:

:host /deep/ h3 {  
  font-weight: bold;  
}

Style Files in Component Metadata

We can set the styleUrls to point to a stylesheet file to style a component.

For example, we can write the following:

app.component.ts :

import { Component } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {}

app.component.css :

h1 {  
  font-size: 50px;  
}

app.component.html ;

<h1>Foo</h1>

In the code above, we put our styles in app.component.css and point our styleUrls to that file in app.component.ts .

We can specify more than one style file in both styles and styleUrls .

Template Inline Styles

We can put style tags in our templates to add template inline styles.

For example, we can write:

app.component.html :

<style>  
  h1 {  
    font-size: 50px;  
  }  
</style>  
<h1>Foo</h1>

The code above will set the h1’s font size to 50 pixels.

Template Link Tags

We can add link tags to templates to reference other styles.

For example, we can write the following code:

app.component.ts :

import { Component } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html"  
})  
export class AppComponent {}

app.component.html :

<link rel="stylesheet" href="./app.component.css" />  
<h1>Foo</h1>

We see that we removed the styleUrls from AppComponent and put a link tag to reference the CSS file.

The styles should be applied from the file we referenced in the link tag.

CSS @imports

We can import CSS files with the standard CSS @import rule.

For example, we can write the following code:

foo.css :

h1 {  
  font-size: 50px;  
}

app.component.css :

@import url("./foo.css");

app.component.html :

<h1>Foo</h1>

External and Global Style Files

We can add external global styles to angular.json to include them in the build.

To register a CSS file, we can put in the styles section, which is set to styles.css by default.

Non-CSS Style Files

Angular CLI supports building style files in SASS, LESS or Stylus.

We can specify those files in styleUrls with the appropriate extensions (.scss, .less, or .styl) as in the following example:

app.component.scss :

h1  {  
  font-size: 70px;  
}

app.component.html :

<h1>Foo</h1>

View Encapsulation

We can control how view encapsulation works by setting the encapsulation setting in out component code.

The following are the possibilities for view encapsulation:

• ShadowDom view encapsulation uses the browser’s native shadow DOM implementation. The component’s styles are included in the Shadow DOM
• Native view encapsulation uses the now deprecated version of the browser’s native shadow DOM implementation
• Emulated is the default option. It emulates the behavior of the shadow DOM by preprocessing and renaming CSS code to effectively scope the CSS to the component’s view
• None means that Angular does no view encapsulation. The styles are added to global styles.

We can change the encapsulation setting as follows:

app.component.ts :

import { Component, ViewEncapsulation } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.scss"],  
  encapsulation: ViewEncapsulation.Native  
})  
export class AppComponent {}

Conclusion

We can use CSS to style Angular components. In addition, it supports SASS, LESS, and Stylus for styling.

By default, the scope of the styles is local to the component. However, we can change that to be different.

We can also include inline styles in our templates via the style and link tags.