Loading

Angular

How to Styling Angular Components?. The Complete Angular Developer Course 2022 [Videos].

In this Video, I am going to discuss the different options that are available in Angular for Styling Angular Components. Please watch our previous Video before proceeding to this Video 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 Video.

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

Styling Angular Components

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

different options that are available in Angular for Styling Angular Components

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

different options for Styling Angular Components

Now, lets 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: 
  1. In this case, you will get the Visual Studio Code editor features such as Intellisense, formatting and Code completion.
  2. 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: 
  1. 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 components 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:
  1. Here also you will get the Visual Studio Code editor features such as formatting, Intellisense, and Code completion.
  2. The Inline-styles are local to the component in which they are applied and hence they dont 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: 
  1. The component can be reused easily as the styles are defined inline here within the component itself.
  2. 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
  3. Here, you will also get Visual Studio Code editor features such as Code completion, Intellisense, and formatting.
  4. 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 decorators 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.


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

Advantages: 
  1. 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.
  2. The styles specified using this approach are local to the component (i.e. to the HTML File) and hence, dont override with the styles used elsewhere in the application.
Disadvantages:
  1. 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.


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. The reason for this is, if you need to change the styles then you need to do this only in one place.
  3. You will also get the Visual Studio Code editor features such as formatting, Intellisense, and Code completion.
  4. The styles specified using this approach are local to the component and hence, they will not collide with styles used elsewhere in the application.

See All

Comments (394 Comments)

Submit Your Comment

See All Posts

Related Posts

Angular / Blog

What is Angular?

Angular is an open-source front-end development platform developed by Google that makes it easy to build Mobile and Desktop web applications. Angular now comes with the latest features such as templates, dependency injection, Forms, Pipes, HTTP Service, component, Directives, etc. which are basically needed to build a complex and sophisticated application that lives on the web, mobile, or the desktop.
7-Feb-2022 /35 /394

Angular / Blog

What is Angular 2 (or any higher version) Framework?

In this article, I am going to give a brief introduction to Angular Framework. At the end of this article, you will understand the following pointers in detail.
7-Feb-2022 /35 /394

Angular / Blog

What is Angular Versions and Versioning in Detail?

In this article, I am going to discuss Angular Versions and Versioning in detail. Please read our previous article where we gave a brief introduction to the angular framework. At the end of this article, you will understand the different angular versions and in each version what are the new features introduced as well as what improves. Till now Google has released 7 versions of angular, they are as follows:
7-Feb-2022 /35 /394