In the last article, we discuss how to set up nested modal using template-ref in our angular application. In this article we discuss on Which events fire when modal open and close. There mainly 4 events fire when modal open to close. Below is the list of the events.
1) onShow: It trigger when modal open.
2) onShown: It triggers after modal open.
3) onHide: It triggers when we click on close or backdrop-click
4) onHidden: It triggers when modal close.
Below is the example of the Modal services fire when we pass reference as a template.
Below is the full embedded code for Events fire when modal open & closed.
In modal currently close from outside click if you want to not close outside click we need to pass the config parameter to show method to “{backdrop: ‘static’}”. Display in below code.
this.modalRef = this.modalService.show(template,{backdrop: 'static'});
In this article we discuss how to setup modal using “services“. Next article we discuss how to setup modal using “directive“.