Angular 2 Component styling
Styling for large Angular application is a challenging task as most of the times styles easily gets mixed and confusing. Major issue that is encountered when we try to structure our styles and give proper naming for individual styles.
To resolve the issue many patterns were introduced to enhance style organization and most of these patterns are implemented when we make use of pre-processors like Sass and Less. The main thing about these patterns is that they suggest organizing our styles and templates in the form of COMPONENTS.
Angular 2 is component based which means that each and every UI functionality is built as a component. A component comes with HTML, JavaScript and also has it’s own styles that belong to it. All we need to do is to define the styles in our component, or at least declare, where to get those from. There are three ways to associate CSS styles to a component in Angular 2: Component inline styles,style urls and template inline styles. Let’s explore them one by one.
Component inline styles
The simplest way to add styles to a component is taking advantage of the @Component decorators it allow us to define component inline styles. All we need to do is to add a styles property to the decorator and define the styles. To see what that looks like, below is the code snippet:
[html]@Component({
selector: ‘test’,
templateUrl: test.html’,
styles: [`
.test {
color: yellow;
}
`]
})
class Test{
@Input() title: string;
}
[/html]
So where did these style end up in the DOM?
If we run this in our browser, we see that Angular takes the defined styles, and writes them into the head of the HTML document. Here’s what it looks like:
[html]
<!DOCTYPE html>
<html>
<head>
<style>
.test {
color: yellow;
}
</style>
</head>
<body>
</body>
</html>
[/html]
So why Angular takes all the styles and puts them up there?
It is because of View Encapsulation. Angular 2 comes with three different view encapsulation types in order to support both, browsers that don’t support Shadow DOM, and also the ones that do support it.
Angular 2 uses the Emulated View Encapsulation by default which means there’s no usage of any Shadow DOM at all. One of the features of Shadow DOM is style encapsulation. It allows us to scope styles to a specific component without affecting the outer world.
To take advantage of style encapsulation, styles have to be put into the shadowRoot of a component. Due to the Shadow DOM strategy that is used, there is no shadowRoot to put our styles into. That’s why Angular writes them into the head.
Styles urls
We never mix our styles with our application code. The tag, allows us to fetch and embed a style sheet from a server. Angular 2 components allow us to define styleUrls, so that styles don’t have to be written into the component. Below is an example:
[html]@Component({
selector: test,
templateUrl:’test.html’,
styleUrls: [test.css’]
})
class Test{
@Input() title: string;
}
[/html]
Where do those end up in the DOM?
Well, for the same reason as explained earlier, they are written into the head of the document. But not only that, when Angular fetches the style resources, it takes the text response, inlines and appends them after all component inline styles. So if we have a configuration like this:
[html]@Component ({
selector: ‘test’’,
templateUrl: ‘test.html’,
styles: [‘.test { color: yellow; }’],
styleUrls: [‘test.css’]
})
class Test{
@Input() title: string;
}
And the test.css content would look like this:
.test {
color: green;
}[/html]
The document head that looks something like this:
[html]
<!DOCTYPE html>
<html>
<head>
<style>
.test {
color: yellow;
}
</style>
<style>
.test {
color: green;
}
</style>
</head>
<body>
…
</body>
</html>
[/html]
It brings us to the conclusion that styles defined in style urls will always be appended and therefore override styles defined in the component, unless the inline styles don’t have a higher specificity.
Template inline styles
We can write our styles directly into the DOM. When thinking in Web Components it’s quite common to put styles directly into the template of a component, since they will be encapsulated when Shadow DOM is used.Those will be appended in the head of document, after the ones defined in the component or as style urls. Template inline styles always have the highest priority.
Read Further on AngularJS Series
- AngularJS : A “Write Less Do More” JavaScript Framework
- AngularJS : Updating a Label Dynamically with User Input
- AngularJS : Adding Items to a JavaScript List and updating corresponding DOM Dynamically
- AngularJS : Text Suggestions
- AngularJS : Sorting objects on various attributes
- AngularJS : Fetching data from the server
- AngularJS : Multiple Views, Layout Template and Routing
- AngularJS : Implementing Routes And Multiple Views
- Building Intuitive Frontend Interfaces with AngularJS
