attribute property 차이

@Component({
   selector : 'app',
   template : `
      <h3>Property vs attribute binding:</h3>
      <input [value]="greeting"         -- 프로퍼티
         [attr.value]="greeting"        -- 어트리뷰트
         (input)="onInputEvent($event)">
   `
})
class AppComponent {
   greeting : string = 'A value';

   onInputEvent (event : Event) : void {
      let inputElement : HTMLInputElement = <HTMLInputElement> event.target;

      console.log(`The input property value = ${inputElement.value}`);
      console.log(`The input attribute value = ${inputElement.getAttribute('value')}`);
      console.log(`The greeting property value = ${this.greeting}`);
   }
}

실행화면

input 값을 변경시 angularJS 는 양방향 데이터 바인딩이라

전체의 값이 변경되지만

Angular의 경우 

프로퍼티값에만 영향을 주고 Attribute는 변경되지 않는다. 양방향에서 단방향으로 변경되었기 때문

Angular1.x 에서 양방향을 지원하다 Angular에서 단방향으로 변경한 이유는 프로젝트의 덩어리가 커질수록 

양방향 데이터가 동기화 될때까지 모든 값을 검사하는데 이 과정에서 심각한 성능저하 현상이 나타나기 때문이란다.