Intercepting Bootstrap 4 modal display and conceal events using Typescript

Question

Intercepting Bootstrap 4 modal display and conceal events using Typescript

While working on integrating a modal with the id myModal, I am attempting to connect it with events that trigger when it is shown and closed. I referred to the documentation at and implemented the following in my modal component:

this.modalElement = document.getElementById("myModal");
this.modalElement.addEventListener("hidden.bs.modal", this.onModalHidden);
this.modalElement.addEventListener("shown.bs.modal", this.onModalShown);

Currently, the event handlers are set up to simply log "shown" or "hidden" for testing purposes, but I am encountering difficulty getting it to function as intended:

private onModalShown = (event) => {
    console.log("modal is shown!!!");
}

I'm wondering if there might be something missing or if there's another way to achieve this?

angular typescript bootstrap-4 twitter-bootstrap-4

Answer 1

Answer №1

If you want to receive notifications for the onOpen and onDismiss events within ModalComponent, you can easily subscribe to them.

@ViewChild('yourModal')
yourModal: ModalComponent;

To ensure proper event handling, I recommend subscribing to these events in the ngAfterViewInit lifecycle hook.

ngAfterViewInit() {
 this.yourModal.onOpen.subscribe(() => {
   //perform a specific action
 });

 this.yourModal.onDismiss.subscribe(() => {
   //perform another action
 });
}

Answer 2

If you want to receive notifications for the onOpen and onDismiss events within ModalComponent, you can easily subscribe to them.

@ViewChild('yourModal')
yourModal: ModalComponent;

To ensure proper event handling, I recommend subscribing to these events in the ngAfterViewInit lifecycle hook.

ngAfterViewInit() {
 this.yourModal.onOpen.subscribe(() => {
   //perform a specific action
 });

 this.yourModal.onDismiss.subscribe(() => {
   //perform another action
 });
}

Answer 3

Answer №2

Here are some code snippets you can try out:

To begin with, I utilized the ViewChild directive to access my modal.

    @ViewChild('MyModal') mymodal: ElementRef;

    //display
    $(this.mymodal.nativeElement).modal('show');
    //conceal
    $(this.mymodal.nativeElement).modal('hide');

    //capture the event when the modal is hidden
    //implicitly trigger hide when backdrop is clicked or ESC key pressed
    //I encountered issues with closing modals, and this resolved the problem
    $(this.mymodal.nativeElement).on('hidden.bs.modal',  () => {
        $(this).modal('hide');
        this.cancelProcedure();//my internal reset function
    });

Answer 4

Here are some code snippets you can try out:

To begin with, I utilized the ViewChild directive to access my modal.

    @ViewChild('MyModal') mymodal: ElementRef;

    //display
    $(this.mymodal.nativeElement).modal('show');
    //conceal
    $(this.mymodal.nativeElement).modal('hide');

    //capture the event when the modal is hidden
    //implicitly trigger hide when backdrop is clicked or ESC key pressed
    //I encountered issues with closing modals, and this resolved the problem
    $(this.mymodal.nativeElement).on('hidden.bs.modal',  () => {
        $(this).modal('hide');
        this.cancelProcedure();//my internal reset function
    });

Intercepting Bootstrap 4 modal display and conceal events using Typescript

Answer №1

Answer №2

Similar questions

How to achieve dynamic class instantiation through constructor injection in Angular 8?

Create a unique look for Angular components by customizing the hosting style

Problems arise in React due to toaster interfering with spying on the 'useState' function

Troubleshooting Cross-Origin Resource Sharing (CORS) issue with Angular, Maven

Unable to determine all parameters for Angular's DataService

Display JSON data in Angular view by extracting the desired value

The combination of MUI pickers and date-fns led to a TypeError: the function utils.getYearText is not defined

What is a creative way to design a mat-radio-group without traditional radio buttons?

Issue with React component not updating when the "Date" value in its state is changed

Angular Material Slide-Toggle Takes Too Long to React

What is the best way to create a scrollable horizontal element using bootstrap?

404 Error: The requested API endpoint seems to have gone missing, as the URL cannot be found

Troubles with the sliding feature on Bootstrap 4 Carousel

What's the best way to show a submenu when the main menu is scrollable?

The custom css class is failing to be applied to a tooltip within Angular Material version 15

Even with manual installation, the npm package still encounters dependency errors

Unable to connect to 'highlight' as it is not a recognized attribute of 'code'

Do const generics similar to Rust exist in TypeScript?

Should I include container-fluid in the body or main level for a Bootstrap 4 website?

Tips for automatically assigning a default value in a material select within an Angular application