Angular2 modal call method in parent from the child

Viewed 5817

Need to utilize modals using ngx-bootstrap. Tried by calling modal from parent component, do task within the modal, click save, then give that data back to parent to run a method based on result.

Parent component calls the modalService and loads a component into it.

this._bsModalRef = this._modalService.show(ConfirmActiveModalComponent);

Component loaded has a single method in it: save().

Parent Component:

import { ConfirmActiveModalComponent } ....

openModal(){
    this._bsModalRef = this._modalService.show(ConfirmActiveModalComponent);
}

addNewRecord(){
    // I need this to run when the modal "Save" button is clicked
}

Modal Component:

@Component({
    selector: 'app-confirm-existing-version-modal',
    templateUrl: './confirmExistingVersionModal.component.html',
    styleUrls: ['./confirmExistingVersionModal.component.css']
})

export class ConfirmExistingVersionModalComponent {

    constructor(
        public _bsModalRef: BsModalRef,
    ) { }

    save() {
       // Some data here from the modal
    }

}

Modal Component HTML:

<div>
    <div class="modal-header text-center">
        <h4 class="modal-title">Confirmation</h4>
    </div>
    <div class="modal-body">
        xx
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="_bsModalRef.hide()">Close</button>
        <button type="button" class="btn btn-default" (click)="save()">Save</button>
    </div>
</div>

How to run the addNewRecord() method in parent when clicking on save button in modal?

I didn't see any callbacks or promises returned from bsModalRef, so don't know where to start. Do I create a subscription in parent for each modal called, to be able to listen for data emitted by modal?

1 Answers
Related