Apply style in Angular5


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
Kailash Chandra Behera


1 comment:

  1. What is the casino? - SEPT
    The best casino online หารายได้เสริม is 1xbet app the 토토 One of the main reasons septcasino why people are https://sol.edu.kg/ spending money on a game is by having a few options. One of the reasons

    ReplyDelete