Angular5 Template


Introduction

In my previous blog we discussed about Angular5 component contains template, in this blog we will discuss about the template of component.

Getting Started

Angular5 Template plays key role to present user interface in browser. It contains reference of view( HTML file) , Angular5 has powerful templating system and v to communicate back and forth from the template to the component class.

Let's discuss about Template with example, below code declares a component which contains Template .Template can be be created inside component Template property or taking reference of an HTML file(Using templateUrl 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>`  
 })  



Above code has created a template in side component using Template property of component and used inline HTML code i for creating User Interface.

 @Component({  
  selector: 'app-home',  
  templateUrl: './home.component.html'})  

Above example creates Template inside component using templateUrl and takes reference of external HTML file to represent User Interface in browser.

I hope you like this blog, my next article will be about 'How to use styling in Angular5'

Thanks
Kailash Chandra Behera


No comments:

Post a Comment