Styling angular 2 components

Suggested Videos
Part 4 - Angular 2 components | Text | Slides
Part 5 - Angular template vs templateurl | Text | Slides
Part 6 - Angular 2 nested components | Text | Slides

In this video we will discuss the different options available to apply styles to Angular Components. This is continuation to Part 6. Please watch Part 6 from Angular 2 tutorial before proceeding.



In our previous video we have built "employee" component which displays employee details in a table as shown below.





employee.component.ts 

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

@Component({

    selector: 'my-employee',

    templateUrl: 'app/employee/employee.component.html'

})

export class EmployeeComponent {

    firstName: string = 'Tom';

    lastName: string = 'Hopkins';

    gender: string = 'Male';

    age: number = 20;

}

employee.component.html

<table>

    <tr>

        <td>First Name</td>

        <td>{{firstName}}</td>

    </tr>

    <tr>

        <td>Last Name</td>

        <td>{{lastName}}</td>

    </tr>

    <tr>

        <td>Gender</td>

        <td>{{gender}}</td>

    </tr>

    <tr>

        <td>Age</td>

        <td>{{age}}</td>

    </tr>

</table>

The following are the different options available to style this "employee component"

Option 1: Specify the following <table> and <td> styles in external stylesheet - styles.css

table {

    color: #369;

    font-family: Arial, Helvetica, sans-serif;

    font-size: large;

    border-collapse: collapse;

}

td {

    border: 1px solid black;

}

Advantages : 

1. Visual Studio editor features (Intellisense, Code completion & formatting) are available.
2. Application maintenance is also easy as we only have to change the styles in one place if we need to change them for any reason.

Disadvantages : 

1. The Stylesheet that contains the styles must be referenced for the component to be reused.
2. Since styles.css is referenced in index.html page, these styles may affect the table and td elements in other components, and you may or may not want this behaviour.

Option 2 : Specify the styles inline in the component HTML file as shown below.

<table style="color: #369;font-family: Arial, Helvetica, sans-serif;

              font-size:large;border-collapse: collapse;">

    <tr>

        <td style="border: 1px solid black;">First Name</td>

        <td style="border: 1px solid black;">{{firstName}}</td>

    </tr>

    <tr>

        <td style="border: 1px solid black;">Last Name</td>

        <td style="border: 1px solid black;">{{lastName}}</td>

    </tr>

    <tr>

        <td style="border: 1px solid black;">Gender</td>

        <td style="border: 1px solid black;">{{gender}}</td>

    </tr>

    <tr>

        <td style="border: 1px solid black;">Age</td>

        <td style="border: 1px solid black;">{{age}}</td>

    </tr>

</table>

Advantages : 

1. Visual Studio editor features (Intellisense, Code completion & formatting) are available.
2. Component can be easily reused as the styles are defined inline
3. Styles specified using this approach are local to the component and don't collide with styles used elsewhere in the application.

Disadvantages : 

1. Application maintenance is difficult. For example, if we want to change the <td> border colour to red we have to change it in several places.

Option 3 : Specify the styles in the component html file using <style> tag as shown below

<style>

    table {

        color: #369;

        font-family: Arial, Helvetica, sans-serif;

        font-size: large;

        border-collapse: collapse;

    }

    td {

        border: 1px solid black;

    }

</style>

<table>

    <tr>

        <td>First Name</td>

        <td>{{firstName}}</td>

    </tr>

    <tr>

        <td>Last Name</td>

        <td>{{lastName}}</td>

    </tr>

    <tr>

        <td>Gender</td>

        <td>{{gender}}</td>

    </tr>

    <tr>

        <td>Age</td>

        <td>{{age}}</td>

    </tr>

</table>

Advantages : 

1. Component can be easily reused as the styles are defined inline with in the component itself
2. Application maintenance is also easy as we only have to change the styles in one place
3. Visual Studio editor features (Intellisense, Code completion & formatting) are available
4. Styles specified using this approach are local to the component and don't collide with styles used elsewhere in the application.

Option 4 : Specify the styles in the component TypeScript file using the @component decorator styles property as shown below. Notice the styles property takes an array of strings containing your styles.

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

@Component({

    selector: 'my-employee',

    templateUrl: 'app/employee/employee.component.html',

    styles: ['table { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: large; border-collapse: collapse;}', 'td {border: 1px solid black; }']

})

export class EmployeeComponent {

    firstName: string = 'Tom';

    lastName: string = 'Hopkins';

    gender: string = 'Male';

    age: number = 20;

}

Advantages : 

1. Component can be easily reused as the styles are defined inline with in the component itself
2. Application maintenance is also easy as we only have to change the styles in one place for this component if we need to change them for any reason.
3. Styles specified using this approach are local to the component and don't collide with styles used elsewhere in the application.

Disadvantages :

1. Visual Studio editor features (Intellisense, Code completion & formatting) are not available.

Option 5 : Specify the styles using the @component decorator styleUrls property. The styleUrls property is an array of strings containing stylesheet URLs. 

Step 1 : Right click on the "employee" folder and add a new StyleSheet. Name it employee.component.css

Step 2 : Copy and paste the following styles for <table> and <td> elements in employee.component.css

table {

    color: #369;

    font-family: Arial, Helvetica, sans-serif;

    font-size: large;

    border-collapse: collapse;

}

td {

    border: 1px solid black;

}

Step 3 : In employee.component.ts file reference employee.component.css stylesheet using styleUrls property as shown below. Please note, the stylesheet path is relative to index.html file.

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

@Component({

    selector: 'my-employee',

    templateUrl: 'app/employee/employee.component.html',

    styleUrls: ['app/employee/employee.component.css']

})

export class EmployeeComponent {

    firstName: string = 'Tom';

    lastName: string = 'Hopkins';

    gender: string = 'Male';

    age: number = 20;

}

Advantages : 

1. Component can be easily reused as both the stylesheet itself and it's path are included with in the component
2. Application maintenance is also easy as we only have to change the styles in one place
3. Visual Studio editor features (Intellisense, Code completion & formatting) are available
4. Styles specified using this approach are local to the component and don't collide with styles used elsewhere in the application.