To fully understand the component code that was generated for us by angular-cli, we need to talk about data bindings. In other words, the way that we were able to render the title declared on the component class to component template.
First, let's take a look at the entire 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!';
}It's not hard to spot the double curly braces in the template. This is a part of Angular's template syntax, which is responsible for one way binding of data from the component class. In this case, we are binding the title property (which is a string) to be rendered between the <h1> tag.
Later in this book, we will explore some more binding options.