Handle outside click bootstrap modal in Angular

Question

As mentioned in bootstrap modal docs we can handle outside modal click with hide.bs.modal. Most of the examples present on the internet are with jquery. Can anyone help me to achieve this in Angular? What I want to achieve is when a bootstrap modal is closed by clicking outside the modal. I want to call a function that will make an API call to the backend and update the data.

Like (menuOpened) and (menuClosed) in mat-menu of angular material, It would really be helpful to achieve show.bs.modal & hide.bs.model in a similar fashion for Angular?

you can use jquery in angular. I don' know for ngx-bootstrap but normal bootsrap packages has jquery as dependency why don't you import jquery in your component? — JSmith, Nov 20 '20 at 13:43
@JSmith I want to achieve this using vanilla JS or in angular way. No jquery use. — Bipul Bikram Thapa, Nov 23 '20 at 03:39
I understand your problem and I don't know how to help you but just take in account that what I'm trying to say here is that bootstrap uses Jquery angular or not — JSmith, Nov 23 '20 at 03:42

score 0 · Answer 1 · answered Nov 20 '20 at 13:55

0

based on this answer

I would try something like:

.html:

<div  #someModal></div>

.ts:

import { ElementRef } from '@angular/core';

declare var $:JQueryStatic;
@ViewChild('someModal') el:ElementRef;
...
$(this.el.nativeElement).on('hide.bs.modal', () => {
    //update your data
  }
)

(not tested)

answered Nov 20 '20 at 13:55

JSmith

4,519
4
29
45

Same here want to achieve this in vanilla JS without the use of jQuery. – Bipul Bikram Thapa Nov 23 '20 at 03:42

Handle outside click bootstrap modal in Angular

1 Answers1