What is Template and TemplateURL in Angular2?

What is Template and TemplateURL in Angular2?

To understand the different between template and templateurl, first you have to understand what is template. Hence, you please read my previous article here – https://indianjackofalltrade.com/what-is-components-in-angular2/

Therefore, lets iterate the concept once again.

Template is part of decorator which helps to build user interface because it contains the HTML, directives and bindings. This can be form by two ways –

1. Template

2. TemplateURL

1. Template: HTML code is written  against template property directly. See below example –

import {Component} from “@angular/core”
@Component({
selector:”kris-app1″,
template:`<h1>Hi {{name}}</h1>`
})
export class AppComponent{
name: string = “Krishnangshu Banerjee”;
}

TemplateURL  figure:1

 

2. TemplateURL: In TemplateURL property, html file path should refer as a value of TemplateURL property which actually refer a .html file. In below figure:2 assigned a path of html file and in figure:3 is actual html file which contains html code.

import {Component} from “@angular/core”;
@Component({
selector:”kris-app1″,
templateUrl:”app.component.html”
})
export class AppComponent{
name: string = “Krishnangshu Banerjee”;
}

Template

figure:2

 <H1>{{name}}</H1>

Template

figure:3

IN next post i will discusses about nested component – https://indianjackofalltrade.com/nested-component-in-angular2

 

One Reply to “What is Template and TemplateURL in Angular2?”

Leave a Reply

Your email address will not be published. Required fields are marked *