In the previous Angular 2 articles, we discussed about components, dependency injections, data bindings and other basic tabs components. In this article, we are going to discuss another important part of Angular 2 when we build components, i.e. styling.
What is a Component?
In Angular 1, we were using directives, controllers, and scope to build an application. Now, in Angular 2, all those concepts are combined into Components. The Components are important building blocks. Each component has the following properties.
A component is self-describing: We define a template either by writing the HTML or through templateUrl which points to a HTML file. The template is defined within the @Component annotation. It describes how the component is going to be rendered on the web page.
A component has precise inputs and outputs: In component, we can define the input as well as the output through annotations, @Input and @Output respectively.
The lifecycle of a component is well defined: In Angular2, as I mentioned above that the component has Input and respective Output. When there is any change in the input properties, the component will be notified and the output will vary accordingly.
Another important property of component is its capability of styling on its own through styleUrls or when we are sharing reusable components across applications. This property is actually worthy when we consider the separation of concerns. Therefore, it allows us to build a component which could be shared, that comes as a package with all the desirable styles, and scope.
In Angular 2, a component comes with HTML, JavaScript and its own styles. Such component has defined styles inside HTML template, or the style Urls’. There are three approaches to associate CSS styles to a component in Angular 2 given as follows.
Component inline styles.
Style URLs.
Template inline styles.
We are going to explore all of these ways with the help of an example below.
Component inline styles
In this approach, we are taking advantage of the @Component decorators that allow us to define component inline styles. Here, we have to add a styles property to the decorator that defines the styles as shown below.
import { Component } from '@angular/core';
@Component({
selector: 'inline-style-app',
template: `<br><br><hr><h2 class="colored_green">Welcome to Angular 2, Component inline styles.</h2>
<p class="colored_orange">Component Inline Styles</p><hr>`,
styles: [`
.colored_green {
background: green;
}
.colored_orange {
background: orange;
}
`]
})
export class AppComponent {
}
When we check the output, we will see the green and orange color in the background as shown below.
Explanation: We can see the background color for defined classes (i.e. colored_green and colored_orange) in styles section of component as a result of the View Encapsulation of Angular 2. There are three types of view encapsulations in Angular 2 which support browsers irrespective of the availability of the support for Shadow DOM. By default, the Angular 2 uses the Emulated View Encapsulation in which Shadow DOM is not used. The Shadow DOM has a very interesting feature of style encapsulation which allows us to scope styles to a particular component without affecting other components present in the outer world. In order to take an advantage of style encapsulation, styles have to be placed at the shadowRoot of a component. In the Shadow DOM strategy, there is no shadowRoot to place our styles into. This is the reason why the Angular 2 writes them into the head section of the HTML.
Styles URLs
When we style an ordinary web page, we write the styles in a stylesheet which is fetched and embedded in a HTML file with the help of the tag. Somewhat similar in Angular 2, the components allow us to define styleUrls, which provide the flexibility to write the styles in a separate css file instead of writing the styles inside the component as shown in the following example.
File app/Component.ts
import { Component } from '@angular/core';
@Component({
selector: 'style-urls-app',
templateUrl: 'resource/template.html',
styleUrls: ['assets/styles.css']
})
export class AppComponent {
}
File assets/styles.css
h2 {
color: #369;
font-family: Georgia, Helvetica, sans-serif;
font-size: 250%;
}
p {
color: #969;
font-family: Georgia, Helvetica, sans-serif;
font-size: 250%;
}
body {
margin: 2em;
}
.colored_green {
background: green;
}
.colored_orange {
background: orange;
}
File resource/template.html
<br> <br> <hr> <h2 class="colored_green">Welcome to Angular 2, Component inline styles.</h2> <p class="colored_orange">Component Inline Styles</p> <hr>
Explanation: Comparing to the previous example, here we have used the templateUrl instead of template to define the path of the actual HTML code file (here template.html). Similarly, stylings classes are defined in the separate stylesheet i.e. styles.css and the path is given to the styleUrls (i.e. assets/styles.css) in the component.
When we run this app with style URLs, we can observe the styling of individual elements present in the component as shown below.
Template inline styles
In template inline styles, we have the flexibility to write the styling classes within the style tag in the template HTML file as shown in the following example.
File app/Component.ts
import { Component } from '@angular/core';
@Component({
selector: 'style-urls-app',
templateUrl: 'resource/template.html'
})
export class AppComponent {
}
File resource/template.html
<style>
.colored_green {
background: green;
}
.colored_orange {
background: orange;
}
</style>
<br>
<br>
<hr>
<h2 class="colored_green">Welcome to Angular 2, Component inline
styles.</h2>
<p class="colored_orange">Component Inline Styles</p>
<hr>
Explanation: Comparing with the previous examples, here we have used templateUrl instead of template to define the path of the actual HTML code file (here template.html) and all the stylings classes are defined in the template HTML itself inside the style tag.
When we run this app with template inline style, we can observe the styling of individual elements present in the component as shown below.
Source Code for style Angular 2 components
Conclusion:
In this article, we discussed about the three approaches with which we can style Angular 2 components along with the practical examples.
