Angular 2 Components

The component template

The template is the heart of the component in Angular 2. Without a template there is nothing to render to the DOM. There are two ways to attach a template to the component:

• Providing a URL to an external html file
• Define the template inline

The app-root that is created by the angular-cli includes an external template. It is defined with the templateUrl property:

[app.component.ts]
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

We can find the template next to app.component.ts as an HTML file with the same name app.component.html. Let's open it to inspect the code:

[app.component.html]
<h1>
  {{title}}
</h1>

Now we know where the <h1> came from. As you can guess, the double curly braces render the title ...