Attribute property binding

One of the great new benefits of the new Angular binding style is that you are able to more accurately target what you are binding to. Formerly, the HTML attribute that was used as a directive or data token was simply used as a matching identifier. Now, you are able to use property bindings within the binding markup for both the input and output.

Note

The code, links, and a live example of this is available at http://ngcookbook.herokuapp.com/8565/.

Getting ready

Suppose you had the following application:

[app/article.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'article', 
  template: ` 
    <input #title (keydown)="setTitle(title.value)"> 
    <h1>{{myTitle}}</h1> 
  ` 
}) 
export class ArticleComponent { 
  myTitle:string; 
 
  setTitle(val:string):void { 
    this.myTitle = val; 
  } 
} 

Your objective is to modify...