Typescript catch bootstrap 4 modal open event

Question

I am trying to execute some code when the bootstrap model opens but everything i try isn't working. Modal:

<div class="modal fade" id="mobileModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true" data-keyboard="false" data-backdrop="static" >

Typescript:

@ViewChild('mobileModal') mobileModal: ElementRef;

ngAfterViewInit() {
    $(this.mobileModal.nativeElement).on('hidden.bs.modal', () => {
      console.log("TESTTESTTEST")
    });
    $(this.mobileModal.nativeElement).on('shown.bs.modal', () => {
      console.log("TESTTESTTEST")
    });
    $("#mobileModal").on('shown', function () {
      console.log("TESTTESTTEST")
    });
  }

Other questions i looked at but didnt work:

Hook to bootstrap 4 modal show / hide events from Typescript

Capture close event on Bootstrap Modal

Calling a function on bootstrap modal open

Cause i was giving that a shot do you know how to catch that event? — ernie, Apr 07 '20 at 08:03

Gourav Garg · Accepted Answer · 2022-05-16T08:05:21.137

0

Use Hostlistener with angular directive.

@HostListener('mouseenter', ['$event'])
onMouseEnter(event: any) {    
 // Logs the id of the element 
 // where the event is originally invoked.     
 console.log(event.target.id);
}

Stackblitz example

edited May 16 '22 at 08:05

answered Apr 07 '20 at 08:42

Gourav Garg

2,856
11
24

Typescript catch bootstrap 4 modal open event

1 Answers1