양방향 바인딩

양방향바인딩을 사용하면 상하위컴포넌트끼리 데이터를 공유할 수 있으며 하위컴포넌트에 데이터를 전달하는 프로퍼티바인딩과 상위컴포넌트에 이벤트를 전달하는 이벤트바인딩이 결합된 형태다.

<app-sizer [(name)]="firstName"></app-sizer>

{{firstName}}

[name]="firstName"으로 하위컴포넌트로 데이터를 보낼수 있고 하위컴포넌트에서는 EventEmitter를 사용해서 상위컴포넌트로 (name)로 데이터를 보내면 firstName값이 변경된다.

   @Input() name!:string;
   @Output() nameChange = new EventEmitter<string>();
   fn(){
      this.nameChange.emit('abcd');
   }

하위컴포넌트에서는 name입력프로퍼티로 데이터를 받고 nameChange 프로퍼티로 EventEmitter객체를 만들어 사용한다.