ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • @Input 데코레이터
    Front-End/Angular 2018. 2. 8. 11:33

    @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장 참고

    'Front-End > Angular' 카테고리의 다른 글

    Componentt 간 통신 Emmit  (0) 2018.02.07
    attribute property 차이  (0) 2018.02.01
    Angular 생소한 문법 Arraw  (1) 2018.01.26
    AngularJS Router  (0) 2018.01.24
    Angular HelloWorld  (0) 2018.01.24

    댓글

COPYRIGHT 2010 EpoNg. ALL RIGHTS RESERVED.