In Chapter 3, The TypeScript Primer, we bound a simple string to the template. If you haven't done it, refer to Chapter 4, Building a Basic Component. Let's overview our app-component code:
[app.component.ts]
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.None,
template: `
<h1>
{{title}}
</h1>
`,
styles: [`
h1 { color: darkblue }
`]
})
export class AppComponent {
title = 'app works!';
}For now, we will focus on the template. Remove the encapsulation and styles properties from the component decorator to make it more clear and focused. While doing this, let's add a type and a constructor to our class as well:
[app.component.ts]
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>
{{ title }}
</h1>
`
})
export class AppComponent {
title: string;
constructor() {
this...