Angular 2 Components

Data bindings

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 ...