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
fileDefine 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 from the component class.
If we want to declare our templates inline, we should use the template property instead. Luckily, in ES6, we are introduce with a way to create multiline strings easily. This feature is called template...