Styling Angular Components

Styling Angular Components

In this article, I am going to discuss the different options that are available in Angular 2 for styling Angular Components. Please read our previous article before proceeding to this article where we discussed the Angular 2 nested component with an example. We are going to work with the same example that we created in our previous article.

In our previous article, we created one student component which will display the student details in a web page as shown in the below image. 

Styling Angular Components

Following is the Student.Component.ts that we created in our previous article.

Styling Angular Components

The following is the StudentComponent.html that we created in our previous article.

Styling Angular Components

Let’s discuss the different options that are available to style the table and TD in an angular application.

Option1: Using external style sheets

In this option, we need to specify the styles in an external style sheet. That we already used in our previous article.

Style.css

Styling Angular Components

Let discuss the advantages and disadvantages of using external style sheets in an angular 2 application.

Advantages: 
  1. We will get the Visual Studio editor features such as Intellisense, formatting and Code completion.
  2. The major advantage is if we want to change or modify the styles then we need to do this in one place only as a result the maintenance of the application becomes very easy.
Disadvantages: 
  1. As the styles.css is referenced in the index.html page, these styles may affect the table and TD elements in other components where you may not want this behavior.

Option2: Inline Styles

In this case, you need to specify the styles inline within the component HTML file as shown below. 

<table style="color:black; font-family:Arial, Helvetica, sans-serif;
              font-size:large; border-collapse:collapse;">
    <tr>
        <td style="border:1px solid black">Name</td>
        <td style="border:1px solid black;">{{Name}}</td>
    </tr>
    <tr>
        <td style="border:1px solid black;">Branch</td>
        <td style="border:1px solid black;">{{Branch}}</td>
    </tr>
    <tr>
        <td style="border:1px solid black;">Mobile</td>
        <td style="border:1px solid black;">{{Mobile}}</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>

Let us discuss the advantages and disadvantages of using inline styles

Advantages:
  1. We will get the Visual Studio editor features such as Intellisense, formatting, and Code completion.
  2. Inline styles are local to the component and hence they don’t collide with styles used elsewhere in the application.
Disadvantages: 
  1. The maintenance of the application becomes very difficult. For example, if we want to change the styles for some reason then we need to do the same things in multiple places.
Option3: Styling in the component HTML file

In this option, we need to specify the styles in the component HTML file using the <style> tag as shown below 

StudentComponent.html file

<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>Name</td>
        <td>{{Name}}</td>
    </tr>
    <tr>
        <td>Branch</td>
        <td>{{Branch}}</td>
    </tr>
    <tr>
        <td>Mobile</td>
        <td>{{Mobile}}</td>
    </tr>
    <tr>
        <td>Gender</td>
        <td>{{Gender}}</td>
    </tr>
    <tr>
        <td>Age</td>
        <td>{{Age}}</td>
    </tr>
</table>
Option4:  Styling in the TypeScript file

In this option, you need to specify the styles in the component TypeScript file using the @component decorator styles property as shown below.

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

@Component({
    selector: 'my-student',
    templateUrl: 'app/Student/StudentComponent.html',
    styles: ['table { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: large; border-collapse: collapse;}', 'td {border: 1px solid black; }']
})

export class StudentComponent {
    Name: string = 'Pranaya';
    Branch: string = 'CSE';
    Mobile: number = 9876543210
    Gender: string = 'Male';
    Age: number = 20;
}

Note: The styles property takes an array of strings containing your styles. 

Advantages: 
  1. The Component can be easily reused as the styles are defined inline within the component itself.
  2. Application maintenance also becomes very 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. The Styles specified using this approach are local to the component (i.e. to the HTML File) and hence, don’t collide with styles used elsewhere in the application.
Disadvantages:

The Visual Studio editor features such as Intellisense, Code completion & formatting are not available.

Option5:  Styling using the @component decorator styleUrls property

In this option, we need to specify the styles using the @component decorator styleUrls property. The styleUrls property is an array of strings containing the stylesheet URLs. 

Step1: Right click on the “Student” folder and add a new StyleSheet with the name studentcomponent.css

Step2: Copy and paste the following codes in studentcomponent.css

table {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    border-collapse: collapse;
}

td {
    border: 1px solid black;
}

Step3: In student.component.ts file reference studentcomponent.css stylesheet using styleUrls property as shown below.

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

@Component({
    selector: 'my-student',
    templateUrl: 'app/Student/StudentComponent.html',
    styleUrls: ['app/Student/studentcomponent.css']
})

export class StudentComponent {
    Name: string = 'Pranaya';
    Branch: string = 'CSE';
    Mobile: number = 9876543210
    Gender: string = 'Male';
    Age: number = 20;
}
Advantages: 
  1. The Component can be easily reused as both the stylesheet itself and its path are included within the component.
  2. Application maintenance becomes very easy as we only have to change the styles in one place if we need to change the styles for any reason/
  3. We will also get the Visual Studio editor features such as Intellisense, formatting, and Code completion.
  4. The Styles specified using this approach are local to the component and hence, don’t collide with styles used elsewhere in the application.

In the next article, we are going to discuss the Data Binding in Angular 2 application using examples.

SUMMARY:

In this article, I try to explain Styling Angular Components. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *