GaramX

1.Parent Component

<app-test-component-interaction [parentData]="name"></app-test-component-interaction>

2.Child Component

export class TestComponentInteractionComponent implements OnInit {
  //@Input() public parentData;
  @Input('parentData') public name;
  constructor() { }
  ngOnInit() {
  }
}

1.child component

  <h2>Hello {{ name }}</h2>
  <button (click)="firstEvent()">Send Event</button>

export class TestComponentInteractionComponent implements OnInit {
  @Input('parentData') public name;
  @Output() public childEvent = new EventEmitter();
 
  constructor() { }
 
  ngOnInit() {
  }
  firstEvent(){
    this.childEvent.emit('Hey Taekgu');
  }
}

2.parent component

<div>Child message: {{ message }}</div>
<app-test-component-interaction (childEvent)="message=$event" [parentData]="name"></app-test-component-interaction>