[Angular 2+][ng-bootstrap] Modal Component 데이터 전달

version: Angular 4

ng-bootstrap: Modal
(https://ng-bootstrap.github.io/#/components/modal/examples)

1004lucifer
Component 간에 데이터 전달 시 태그 속성으로 emit 이벤트를 전달받을 함수를 넣으면 되는데.. Modal 사용 시 HTML 태그를 명시하지 않아 스크립트에서 어떻게 처리를 하는지 알아보았다.




modal.component.ts

data: string;
@Output() outputData = new EventEmitter<SystemDeviceFilter>();

constructor(
 // ng-bootstrap Modal
 public activeModal: NgbActiveModal
) {
}

doOutput() {
 this.outputData.emit(this.data);
 this.activeModal.close(); // Modal Close
}

1004lucifer

parent.component.ts

constructor(
 private modalService: NgbModal,
 ...
) {
}

const modalComponent = this.modalService.open(ModalComponent).componentInstance;
modalComponent.outputData.subscribe((data) => {
 // data을 활용한 로직
});

참조:
https://github.com/ng-bootstrap/ng-bootstrap/issues/861#issuecomment-253500089