Angular 2 binding on modal's close event

Question

Which is the proper way to stop a Youtube embedded video in Angular 2?

As in AngularJS, the best solution seems to be using JQuery to change the iframe's src property, but this is to be avoid in Angular2. Stop Youtube video after modal close

In angular 2, I'm not supposed to manipulate the dom, so my embedded iframe takes its src property from a variable in my component. When I unset this property, the video stops playing as expected.

So, the (close) binding to the button works nice, but it doesn't stop playing when I click outside the modal.

I've tried to bind (close), (hide), (hidden), and (dismiss) in my modal <div>, but none of them works.

I wonder if something like this is possible:

<div (hide)="stopVideoPlayer()" class="modal fade" id="modal-video" tabindex="-1" role="dialog" aria-labelledby="modal-video" aria-hidden="true">
        <button (click)="stopVideoPlayer()" type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="modal-video">
            <iframe id="video-player" width="640" height="480" class="embed-responsive-item" [src]="selectedVideo" frameborder="0"></iframe>
          </div>
      </div>
    </div>
  </div>
</div>

If you click outside modal , is it getting closed? – The Hungry Dictator May 22 '17 at 07:13 — The Hungry Dictator, May 22 '17 at 07:13
Can you create a plunkr ? – The Hungry Dictator May 22 '17 at 08:16 — The Hungry Dictator, May 22 '17 at 08:16

score 2 · Answer 1 · answered May 21 '17 at 12:39

2

You should be using (onHidden) which is triggered after the modal is hidden and all css transitions are complete. Emit the value in this method.

<div (onHidden)="afterHidden($event)"> </div>

answered May 21 '17 at 12:39

Aravind

40,391
16
91
110

doesn't seems to work... I tried (hidden) and (onHidden) but none of them triggers my function. – luso May 21 '17 at 17:42
well, I tried what already stated and your suggestion for hidden, but none of them works so far – luso May 21 '17 at 18:43
can you create a plunker with the related functionality i will work on it and fix for you – Aravind May 21 '17 at 20:33

score 0 · Answer 2 · answered Mar 08 '19 at 20:11

Actually, if you're using ngx-bootstrap modal, then the event name is (onHide). This will work. That said, find the html template that contains your modal @ViewChild reference, usually #modal

<div bsModal #modal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" (onHide)="onModalHide($event)">

In the code, define method for this event

onModalHide(event){
// your code here
}

score 0 · Answer 3 · answered Jul 18 '19 at 19:37

In my case I use Angular 7 and below methods worked for me.

Using JQuery

$('#banner_video_modal').on('hidden.bs.modal', function () {
  // your code
});

Using click event listener

Since when click event makes the modal hidden, it effects like hide, dismiss or close event.

- ***.component.html
<div
     class="modal fade"
     id="banner_video_modal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true"
     (click)="onModalHide($event)"
>       
- ***.component.ts
onModalHide(e) {
    // here your code
}

Angular 2 binding on modal's close event

3 Answers3