Template in Angular5

Kailash Chandra Behera | Thursday, March 15, 2018

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>`  
 })

The above code has created a template inside component using Template property of the 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

By at