Angular Styles Vs StyleUrls

Click to share! ⬇️

When building templates for components in an Angular application, you are likely going to want the ability to style that specific component with CSS styles without affecting other components. A given template is often going to need a unique style. For example, if you build a special footer component, you might want to style hyperlinks with a style different from the rest of the application. In the case of having nested components, there are a couple of ways to apply styles to the nested component with no leakage to other components. In this tutorial, we’ll see how we can apply specific styles to only certain components.

Inline CSS of HTML Template File

The first option you have is to simply inline the CSS rules right inside the HTML of the given template. This approach often works for quick and dirty styles you want to apply, but the problem is over time, it gets very messy and harder to maintain. Here is an example of adding an inline style to the Angular template file directly.

game-list.component.html

<table class='table' *ngIf='games && games.length'>
    <thead>
    <tr>
        <th>
            <button class='btn btn-primary'
                    (click)='toggleImage()'>
                {{showImage ? 'Hide ' : 'Show'}} Image
            </button>
        </th>
        <th style="color:firebrick">Game</th>
        <th>Part#</th>
        <th>Release Date</th>
        <th>Cost</th>
        <th>5 Thumb Rating</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor='let game of games'>
        <td>
            <img *ngIf='showImage'
                 [src]='game.imageUrl'
                 [title]='game.gameName'
                 [style.width.px]='imageWidth'
                 [style.margin.px]='imageMargin'>
        </td>
        <td>{{ game.gameName }}</td>
        <td>{{ game.gameCode | lowercase }}</td>
        <td>{{ game.releaseDate }}</td>
        <td>{{ game.price | currency:'USD':'symbol':'1.2-2' }}</td>
        <td>{{ game.thumbRating }}</td>
    </tr>
    </tbody>
</table>

angular inline template css style

Encapsulate Angular Styles

The component Decorator has built-in properties to allow developers encapsulate styles as part of the component directly. These are the styles and styleUrls properties.

Using `styles`

with the styles property in the component, you can apply a style or many styles right in the value of the styles property. Here is an example of that.

game-list.component.ts

import {Component} from '@angular/core';
import {IGame} from './game';

@Component({
    selector: 'game-list',
    templateUrl: './game-list.component.html',
    styles: ['th:nth-child(3) {color:deepskyblue}']
})
export class GameListComponent {
    pageTitle = 'Dynamic! Game List';
    imageWidth = 45;
    imageMargin = 1;
    showImage = true;
    listItem = 'Mario';
    games: IGame[] = [...];

    toggleImage(): void {
        this.showImage = !this.showImage;
    }
}

angular style in component file

Using `styleUrls`

Both the style and styleUrls properties are arrays. This means that in the case of styles, you can apply multiple style definitions for each array position. In the case of styleUrls, you can specify a linked style sheet in each array position. This means you could split up different css rules into different css style sheets if you like. To use the styleUrls property, first we can create an external style sheet to link to for this component.
linked style sheet for angular component

The purpose of encapsulating the styles within the component is so that any selectors or classes used only target this specific component. That way, you will not get unexpected results elsewhere on the page when the style is encapsulated. This is a big benefit. Before we can apply styles in this new stylesheet however, we must link it. Here is how to do that.
game-list.component.ts

import {Component} from '@angular/core';
import {IGame} from './game';

@Component({
    selector: 'game-list',
    templateUrl: './game-list.component.html',
    styleUrls: ['./game-list.component.css']
})
export class GameListComponent {
    pageTitle = 'Dynamic! Game List';
    imageWidth = 45;
    imageMargin = 1;
    showImage = true;
    listItem = 'Mario';
    games: IGame[] = [...];

    toggleImage(): void {
        this.showImage = !this.showImage;
    }
}

Once the external style sheet is linked in the styleUrls property, we can add some style rules to the game-list.component.css file like so.

th:nth-child(4) {
    color: lightslategrey;
}

using angular styleurls property

Note: You need to choose one or the other approach when dealing with applying css styles in the component Decorator. In other words, either put an array of style rules in the styles property or link an external style sheet in the styleUrls property. They do not work together. In most cases therefore, it is probably easier and more convenient to just use that styleUrls property along with a linked style sheet.

Summary

Encapsulating styles in Angular is possible by defining styles in the component itself. This allows the styles defined to be specific to the given component, without leakage to other parts of the application.

styles property: Used to specify an array of declared styles. Good for very simple style definitions.
styleUrls property: Used to specify an array of linked stylesheet paths. Better for a more organized layout of style declarations.

Using one of these two approaches leads to the given styles being encapsulated in the component.

Click to share! ⬇️