Angular 9 ngBootstrap вызвать модальное окно дочернего компонента

товарищи!

Прощу помощи, по клику в родительском компоненте нужно вызывать модальное окно дочернего компонента.

Оставляю ссылку на код: https://stackblitz.com/edit/angular-ivy-olg75f

Понимаю что нужно как то реализовать Input, Output но никак не могу понять как это сделать.

Буду очень благодарен если покажете пример на коде!


Ответы (1 шт):

Автор решения: Татьяна Компаниец

Через @ViewChild можно: https://stackblitz.com/edit/viewchild-modal-stackoverflow

parent.component.ts:

@ViewChild(ChildComponent) childcomponent: ChildComponent;
constructor(private modalService: NgbModal) {}

ngOnInit() {
    console.log(this.childcomponent);
}

onAddReader(modal) {
    this.modalService.open(modal, { centered: true });
}

openChild(modal) {
    this.childcomponent.showModal();
}

child.component.ts:

@ViewChild('modal') modal: ElementRef;
constructor(public modalService: NgbModal){}

test(){
    this.modalService.open(this.modal);
}

ngOnInit(): void {}

showModal() {
    this.modalService.open(this.modal)
}
→ Ссылка