A guide to styling Angular Components
Tags: angular, webdev, programming, javascript
Published: 2021-01-23 00:18:15

**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.