GaramX

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

===== Component Interaction =====
==== From the parent component To the child component ====
1.Parent Component
<code html>
<app-test-component-interaction [parentData]="name"></app-test-component-interaction>
</code>
2.Child Component
<code javascript>
export class TestComponentInteractionComponent implements OnInit {
  //@Input() public parentData;
  @Input('parentData') public name;
  constructor() { }
  ngOnInit() {
  }
}
</code>
==== From the child component To the parent component ====
1.child component
<code html>
  <h2>Hello {{ name }}</h2>
  <button (click)="firstEvent()">Send Event</button>
</code>
<code javascript>
export class TestComponentInteractionComponent implements OnInit {
  @Input('parentData') public name;
  @Output() public childEvent = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }
  firstEvent(){
    this.childEvent.emit('Hey Taekgu');
  }
}
</code>
2.parent component
<code html>
<div>Child message: {{ message }}</div>
<app-test-component-interaction (childEvent)="message=$event" [parentData]="name"></app-test-component-interaction>
</code>

GaramX

사용자 도구

사이트 도구

문서 도구