Read Angular 2.0 Introduction

Templates

They are the companion of Components. More clearly, it is the component’s view , which tells Angular how to render the component. It is in HTML format with regular HTML tags plus uses Angular’s template syntax (like *ngFor, *ngIf).

It can be defined in the same component file or can be in separate file (for clean coding) with its reference in the component file in the @Component decorator. (Read Components first for better understanding).

So the component , template and metadata together describes a view. This can be placed in the index.html with the help of custom tags.

Read about Component , and Metadata as well

Tip :
It have .html extension. app.component.html just like this.

Example – app.component.ts

import { component } from '@angular/core'

@Component({
selector : 'my-app',
template:
<header>
<div>My Angular 2 App!</div>
</header>
<div class="jumbotron">
<h1>Welcome to our App</h1>
</div>
<footer class="text-center">
Copyright © 2017
</footer>

styles: [
.jumbotron { box-shadow : 0 2px 0 rgba(0, 0, 0, 0.5); }
]
})