Introduction
In my previous blog, we discussed how to create User Interface(View) using template inside Angular5 component. In this blog we will discuss how to style to view.
Getting Started
Apply style to view in Angular5 is as easy as in normal html or any other web technology. Angular5 provides verity of power full processor to apply style. Style can be apply using inline codes or by reference external style sheet file as well.
The Angular5 component helps to apply style in view. Like templating component also contains two property(styles,styleUrl) for this. The styles property helps to apply style with in line codes and the styleUrls property keeps reference of external style sheet.
Example:-1
This example apples style with using Style property of component. @Component({
selector: 'app-home',
template: `
<HTML>
<HEADER>
<TITLE>
My Angular 5 Tutorial
</TITLE>
</HEADER>
</HTML>
<BODY>
This my example of Angular 5 Template
</BODY>`,
styles: [`
p { font-weight: bold; }
div { color: gray; }
`]
})
Example:-2
Here below code example uses component styleUrls property to apply style in view. @Component({
selector: 'app-home',
template: `
<HTML>
<HEADER>
<TITLE>
My Angular 5 Tutorial
</TITLE>
</HEADER>
</HTML>
<BODY>
This my example of Angular 5 Template
</BODY>`,
styleUrls: ['./home.component.scss']
})
Thanks