Template in Angular5

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

Kailash Chandra Behera

An IT Professional with 12 years experience in development life cycle in windows, service and Web based application using Microsoft.Net technologies. Proven record of developing all phases of projects in Microsoft.Net technology from initiation to closure aligning with the company's Business objectives to drive process improvements, competitive advantage and bottom-line gains. -> Good exposure of independently working and developing multiple projects ->Committed to efficient and effective development of projects in a fast-paced and deadline driver environment. Skill :- Develop and design projects in various technologies of Microsoft Technology. Total IT Experience- 13+

Previous Post Next Post

نموذج الاتصال