In the last article, we discuss how to set up modal using directive in our angular application. In this article, we discuss how we can fire events using directive. “ModalDirective” expose mainly 4 events
1)onShow : It triggers when modal start to open.
2)onShown : It triggers after modal open.
3)onHide : It triggers when we click on close or backdrop-click.
4)onHidden: It triggers after modal close.
Below is the full example code how to call “ModalDirective” and trigger events
In the above example, in component we have first import ModalDirective import { ModalDirective } from ‘ngx-bootstrap/modal’;. In our modal html we have trigger events
// HTML
(onShow)="handler('onShow', $event)"
(onShown)="handler('onShown', $event)"
(onHide)="handler('onHide', $event)"
(onHidden)="handler('onHidden', $event)"
// Incompoent
handler(type: string, $event: ModalDirective) {
console.log(type);
if(type == "onShow"){
//trigger some code when modal start.
}
if(type == "onShown"){
//trigger some code when modal open.
}
if(type == "onHide"){
//trigger some code when modal start to hide.
}
if(type == "onHidden"){
//trigger some code when modal close.
}
}
Display Output in below video.
Below is the full embedded code for Events fire using “ModalDirective.”