Using CSS in Angular2

Introduction

AngularJS 2 is an open source, MV* JavaScript framework developed by Google. It is widely use across the industry to build web applications.In this article, we will demonstrate how to use CSS in Angular 2.

What are the different ways to add CSS in Angular 2?

CSS can be added in Angular 2 in 3 ways:

1. Inline - by using the style attribute.
2. Internal - by adding styles property to the @Component decorator and define the styles.
3. External - by adding styleUrls property to the @Component decorator and define the styles.

(A) Adding Inline styles in Angular 2

Let us look into the below piece of code

<h1>
	<center>

			Demonstration of InLine CSS in Angular2 

				<br/><br/>
			<b>
				<font 

					color="blue" 

					style="font-family:Serif;font-style:oblique;background-color:lightblue;border:5px solid yellow;">

					Employee Details
				</font>
			</b>
	</center>
</h1>
	
       <table border="1" align="center" style="background-color:orange;border: 10px double red;">
			<tr>
				  <th style="background-color:#4CAF50;" >Sl No.</th>
				  <th style="background-color:#4CAF50;">Name</th>
				  <th style="background-color:#4CAF50;">Gender</th>
				  <th style="background-color:#4CAF50;">Address</th>				 
			</tr>

			<tr>				    
				  <td>1</td>
				  <td>Niladri Biswas</td>
				  <td>Male</td>
				  <td>Bangalore</td>
			</tr>				
		</table>

Here we have added inline CSS styling to the font, table and th elements. The output is as under.

(B) Adding Internal styles in Angular 2

For adding the Internal styles in Angular 2, we add styles property to the @Component decorator and define the styles. For example, let's open the app.ts and write the below

app.ts
--------
@Component({
  selector: 'employee-selector',
  templateUrl: 'employee-information-apps.html' 
  styles:[
    `
      font{font-family:Serif;font-style:oblique;background-color:lightblue;border:5px solid yellow;}
      th{background-color:#4CAF50;} 
      .applyForTable{background-color:orange;border: 10px double red;}   
    `    
    ]
})

In this way we are adding style-sheet per component (which is a combination of html/JS/CSS of it's own) which is modular and easily extensible. This brings the reusable components sharing across application. This also brings the separation of concerns which on the other hand helps while building the component and shared the packaged component with all needed styles pertaining to that component.

The view part (employee-information-apps.html) looks as under

<h1 align="center">	
			Demonstration of Internal CSS in Angular2 
				<br/><br/>
			<b>
				<font color="blue">Employee Details</font>
			</b>
</h1>
	
       <table border="1" align="center" class="applyForTable">
			<tr>
				  <th>Sl No.</th>
				  <th>Name</th>
				  <th>Gender</th>
				  <th>Address</th>				 
			</tr>

			<tr>				    
				  <td>1</td>
				  <td>Niladri Biswas</td>
				  <td>Male</td>
				  <td>Bangalore</td>
			</tr>				
		</table>

Here we have added Internal CSS styling to the font, table and th elements. The output is as under.

Angular takes the defined styles and writes them into the head of the HTML document.

This happens because of the inbuilt View Encapsulation of Angular 2 that enables the application to use Shadow DOM.

(C) Adding External styles in Angular 2

For adding the External styles in Angular 2, we add styleUrls property to the @Component decorator and define the styles. For example, let's create a file(say employeeStyles.css) under the folder(say css) and write the below code

employeeStyles.css
--------------------
font{font-family:Serif;font-style:oblique;background-color:lightblue;border:5px solid yellow;}

.applyForTable{background-color:orange;border: 10px double red;}   

th{background-color:#4CAF50;} 

and refer the same inside the app.ts as under

app.ts
--------
// Annotation section
@Component({
  selector: 'employee-selector',
  templateUrl: 'employee-information-apps.html' 
  styleUrls: [        
        'css/employeeStyles.css'
    ]
})

In a real world situation we always keep our style-sheets separated from the application code. Angular 2 provides styleUrls for that purpose so that styles don't have to be written into the component.

The view part (employee-information-apps.html) looks as under

<h1 align="center">	
			Demonstration of Internal CSS in Angular2 
				<br/><br/>
			<b>
				<font color="blue">Employee Details</font>
			</b>
</h1>
	
       <table border="1" align="center" class="applyForTable">
			<tr>
				  <th>Sl No.</th>
				  <th>Name</th>
				  <th>Gender</th>
				  <th>Address</th>				 
			</tr>

			<tr>				    
				  <td>1</td>
				  <td>Niladri Biswas</td>
				  <td>Male</td>
				  <td>Bangalore</td>
			</tr>				
		</table>

Here we have added External CSS styling to the font, table and th elements. The output is as under.

In this case also, Angular takes the defined styles and writes them into the head of the HTML document.

This happens because of the inbuilt View Encapsulation of Angular 2 that enables the application to use Shadow DOM.

References

Learn Angular 2

Conclusion

This article covers how to use CSS in Angular 2. Hope this will be helpful. Thanks for reading. Zipped file is attached herewith.