I want to pass a modal event from the modal component to the modal's parent component, but for some reason I can't seem to get the EventEmitter to work. If anyone has an idea it would be greatly appreciated. The main code is below, a (non-working) plunk forked from the ng-bootstrap demo is here: http://plnkr.co/edit/xZhsqBV2mQaPxqFkoE7C?p=preview
app.ts
@Component({
selector: 'my-app',
template: `
<div class="container-fluid" (notifyParent)="getNotification($event)">
<template ngbModalContainer></template>
<ngbd-modal-component ></ngbd-modal-component>
</div>
`
})
export class App {
getNotification(evt) {
console.log('Message received...');
}
}
modal-component.ts
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-modal-content',
template: `
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
<button type="button" class="btn btn-secondary" (click)="notify()">Notify</button>
</div>
`
})
export class NgbdModalContent {
@Input() name;
@Output() notifyParent: EventEmitter<any> = new EventEmitter();
constructor(public activeModal: NgbActiveModal) {}
notify(){
console.log('Notify clicked...');
this.notifyParent.emit('Here is an Emit from the Child...');
}
}
@Component({
selector: 'ngbd-modal-component',
templateUrl: 'src/modal-component.html'
})
export class NgbdModalComponent {
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.name = 'World';
}
}
Updated answer:
Finally I found solution to your issue. I am not sure if you have carefully studied all the examples given for modal component on ng-bootstrap web site.
You need to return result using activeModal.close() method from the content component. That value will be picked up in Modal Component and then you can do whatever you want to do with it. I have created a working Plunker which is basically fork of the official plunk and it works like charm.
Old answer:
I think you have put event handling code at wrong place and that's why you don't get event notification.
Below is the working template on app.ts
template: `
<div class="container-fluid">
<template ngbModalContainer></template>
<ngbd-modal-component (notifyParent)="getNotification($event)"></ngbd-modal-component>
</div>
`
Also modified code of Notify function in modal-component.ts to
notify(){
console.log('Notify clicked...');
this.notifyParent.emit('Here is an Emit from the Child...');
this.activeModal.close('Notify click');
}
I have forked and modified your plunk to make it working here
In angular 7 accepted answer is not working. So I found new solution to it. It's similar to but little bit change there.
Nothing should be changed in child component's typescript file. You need to do regular code for @output and emit function. But you need some changes in parent type script file. Code below is working for me to collect event and data.
open() {
const modalRef = this.modalService.open(NgbdModalContent);
// componentInstace didnot work here for me
// modalRef.componentInstance.name = 'World';
modalRef.content.notifyParent.subscribe((result)=>{
console.log(result);
})
}
This is how your app.ts should be:
@Component({
selector: 'my-app',
template: `
<div class="container-fluid">
<template ngbModalContainer></template>
<ngbd-modal-component>
<ngbd-modal-content [name]="modal Title" (notifyParent)="getNotification($event)"></ngbd-modal-content>
</ngbd-modal-component>
</div>
`
})
export class App {
getNotification(event) {
console.log('Message received...');
}
}