@Input 데코레이터

@Output EventEmitter 로 데이터 통신하는 방법과

이번에는 @Input 

에 대해 사용법을 알아 보면 

바인딩할 프로퍼티명을 지정. 

@Component({
   selector : 'order-processor',
   template : `
      Buying {{ quantity }} shares of {{ stockSymbol }}
   `,
   styles : [`:host { background : cyan; }`]
})

export  default class OrderComponent {
   @Input() stockSymbol : string;
   @Input() quantity : number;
}

@Input으로 stockSymbol, quantity 값 지정

@Component({
   selector : 'input-test',
   template : `
      <input type="text" placeholder="Enter stock (e.g. IBM)" (input)="onInputEvent($event)">
      <br/>
      <order-processor [stockSymbol]="stock" quantity="100"></order-processor>
   `
})

export class InputComponent {
   stock : string;

   onInputEvent ({ target }) : void {
      this.stock = target.value;
   }
}

(input)="onInputEvent($event)" 지정

값을 토스~ 

[stockSymbol]="stock" stock 값이 변경되는것을 확인 가능

Angular with TypeScript 6장 참고