Styling Components Angular 2 - Part Six

In this blog, you will learn how to style HTML code for a component.

In my last document, you saw how to create your own component in an Angular 2 Application and how to use it.

For reference, refer to the link given below.

• Creating our First Component in Angular 2

Let us learn how to style HTML code for a component.

In an Index.html, we can find out class reference style.css, as shown below.

<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">

Now, let’s open rathrola.component.ts. Let me create sample HTML tags with header 4, as shown below.

We have to use styles configuration with back ticks, followed by h4 class with the color Red. Let’s refresh the page and see the result, as shown below.

@Component({
    selector: "my-tuts",
    template: `<h2>Rathrola Prem Kumar, Consultant</h2>`,
    styles: [`h4{
color:red;
}`]
})

Output

 

We have header 4 from rathrola.component in Red color.

We have to keep in mind that style is confined to a component, so if we have multiple components, then if we have styles for each component, then the style is restricted to particular component.

Let me show with an example, open app.component and create metadata configuration, which is style say <h4> as shown below with Blue color.

import {
    Component
} from '@angular/core';
import {
    RathrolaComponent
} from './rathrola.component'
@Component({
    selector: 'my-app',
    template: `<h1>Hello World From Rathrola Prem Kumar</h1>
<h4>Header 4 from App component</h4>
<my-tuts></my-tuts>`,
    styles: [`h4{
color:blue;
}`],
    directives: [RathrolaComponent]
})
export class AppComponent {}

Now, open style.css and add h4 class with color Orange, as shown below.

h4{
color:orange;
}

 

Now, open an Index.html. Under the display Application part, add header 4 tag. Now, save and refresh the Browser.

 

Thanks for reading my blog. In my next document, we shall see how interpolation and Data binding in it works in detail. Stay tuned.