Back to: Angular Tutorials For Beginners and Professionals
Styling Angular Components
In this article, I am going to discuss the different options that are available in Angular for Styling Angular Components. Please read our previous article before proceeding to this article where we discussed the Angular Nested Component with an example. We are also 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 on a web page as shown in the below image.
Following is the Student.Component.ts that we created in our previous article.
The following is the StudentComponent.html that we created in our previous article.
Now, let’s discuss the different options that are available in angular to style the table and TD. Here, we are also going to discuss the advantages and disadvantages of each option.
Option1: Styling Angular Components using External Stylesheets
In this case, you need to specify the styles in an external style sheet. So, by default, the styles.css file is created within the src folder of your project. So, let us add the required styles for table and td in the styles.css file as shown below.
table { color: #369; font-family: Arial, Helvetica, sans-serif; font-size:large; border-collapse: collapse; } td { border: 1px solid black; }
Now, if you check the webpage, you should get the output as expected. Let discuss the advantages and disadvantages of using external style sheets in the angular application.
Advantages:
- In this case, you will get the Visual Studio Code editor features such as Intellisense, formatting and Code completion.
- The biggest advantages of using an external style sheet are if you want to change or modify the styles then you need to do this only in one place. As a result, the maintenance of the application becomes very easy.
Disadvantages:
- As you specify the reference to the external styles sheets in the index.html page, these styles may affect the table and td elements in other components where you may not want these styles to be applied.
Option2: Styling Angular Components using Inline Styles
In this case, you need to specify the styles inline within the component’s HTML file (student.componet.html) 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;">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:
- Here also you will get the Visual Studio Code editor features such as formatting, Intellisense, and Code completion.
- The Inline-styles are local to the component in which they are applied and hence they don’t override with the styles used in any other places in the application.
Disadvantages:
With inline styles, the maintenance of the application becomes very difficult. This is because if you want to change or modify the styles then you need to do the same things in multiple places.
Option3: Styling in the component HTML file
In this case, you need to specify the styles in the component HTML file using the <style> tag as shown below. In our example, the component HTML file is Student.Component.html.
<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>
Advantages:
- The component can be reused easily as the styles are defined inline here within the component itself.
- Application maintenance becomes very easy. The reason is, if you need to do any changes in the styles, then you only have to do the changes in one place
- Here, you will also get Visual Studio Code editor features such as Code completion, Intellisense, and formatting.
- The styles specified using this approach are local to the component and hence they will not collide with styles used elsewhere in the application.
Option4: Styling in the Component file
In this case, you need to specify the styles in the component file using the @component decorator’s style property. So, open student.component.ts file and then copy and paste the following code in it. As you can see, here we are specifying the required styles using the styles property of @Component decorator.
import { Component } from '@angular/core'; @Component({ selector: 'app-student', templateUrl: './student.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 StudentComponent { Name: string = 'Anurag'; Branch: string = 'CSE'; Mobile: number = 9876543210; Gender: string = 'Male'; Age: number = 22; }
Note: The “styles” property takes an array of strings containing your styles.
Advantages:
- Application maintenance becomes very easy. The reason is, in case you need to change or modify the styles then you need to do this only in one place.
- The styles specified using this approach are local to the component (i.e. to the HTML File) and hence, don’t override with the styles used elsewhere in the application.
Disadvantages:
- The Visual Studio Code editor features such as Code completion, Intellisense, and formatting are not available.
Option5: Styling using the @component decorator styleUrls property
In this case, you should have an external stylesheet and then you need to specify that external style sheet using the styleUrls property of the @component decorator. Here, the styleUrls property is actually an array of strings containing the external stylesheet URLs. That means here you can specify more than one external stylesheets.
Step1: Open student.component.css file which you can find inside the student folder. Once you open the file, then copy and paste the following code in it.
table { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: large; border-collapse: collapse; } td { border: 1px solid black; }
Step2: Specify student.component.css using styleUrls property
Open the student.component.ts file and then copy and paste the following code in it. Here, as you can see we have specified the path of the student.component.css file using styleUrls property of the @Component decorator.
import { Component } from '@angular/core'; @Component({ selector: 'app-student', templateUrl: './student.component.html', styleUrls: ['./student.component.css'] }) export class StudentComponent { Name: string = 'Anurag'; Branch: string = 'CSE'; Mobile: number = 9876543210; Gender: string = 'Male'; Age: number = 22; }
Advantages:
- The Component can be easily reused as both the stylesheet itself and its path are included within the component.
- Application maintenance becomes very easy. The reason for this is, if you need to change the styles then you need to do this only in one place.
- You will also get the Visual Studio Code editor features such as formatting, Intellisense, and Code completion.
- The styles specified using this approach are local to the component and hence, they will not collide with styles used elsewhere in the application.
In the next article, we are going to discuss the Data Binding in Angular Application using examples. Here, in this article, I try to explain Styling Angular Components. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.
Please include custom directives concept