How to emit event from modal to its parent component

Question

/** parent componet */
const modalRef = this.dialogService.addDialog(StaticRoutesModalComponent, {data});
modelRef.________.subscribe((result)=>{
    if(result === 'updateTable') {
        this.getAndUpdateTableData();
    }
});

/** modal component */
export class ModalComponent extends DialogComponent<DataModel, boolean> implements OnInit {
    @Output() notifyParent: EventEmitter<string> = new EventEmitter();

    onEmit() {
        this.notifyParent.emit('updateTable');
    }
}

Need to emit an event from modal to its parent component without closing the modal.

Answer 1

Move your event into some service, inject the service in both components, in the first subscribe to it, in the second - emit it.

Answer 2

Pass function as an attribute to component.

Check the following demo code:

// parent.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-parent',
    templateUrl: './parent.component.html',
    styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
    constructor() {}
    emittedFn() {
        // your logic here
    }
}
// parent.component.html
<app-modal [fn]="emittedFn"></app-modal>

// modal.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Input() fn: any;
@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
  constructor() {}
}
// modal.component.html
<div>
    <button (click)="fn()">emit parent</button>
</div>

Answer 3

I've been handling this with the ng-bootstrap's NgbModal class and passing the parent component to the modal using this keyword and NgbModal.componentInstance property.

//parentComponent.ts
import { NgbModal} from '@ng-bootstrap/ng-bootstrap';
export class ParentComponent  implements OnInit{   
    constructor(
      public modal:NgbModal 

    ) { }
    
    ngOnInit(): void {
    }
    
    openModal(){
        //Configure modal
        const options:NgbModalOptions = {backdrop:true,size:'xl',keyboard:true,backdropClass:'modal-custom-back'};
        
        const modal = this.modal.open(ModalComponent,options);

        // give modal access to parent component instance
        modal.componentInstance.parentComponent = this
    }
    parentFunction(data){
        //manipulate data
    }
}

//modalComponent.ts
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import { Component, OnInit } from '@angular/core';
    export class ModalComponent {

        public parentComponent:OnInit

        constructor(
            //Make active modal class available to template for functions such as close/dismiss and passing data back
            public activeModal:NgbActiveModal
        ){}
        
        modalFunction(data){
            this.parentComponent.parentFunction(data)
            this.parentComponent.ngOnInit()
            this.activeModal.close()
        }

        

  }