CODEWITHSUNDEEP
javascripttwitter-bootstrapangulartypescript
luso
luso

Reputation: 3000

Angular 2 binding on modal's close event

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>

Upvotes: 2

Views: 5605

Answers (3)

Sergio Reis
Sergio Reis

Reputation: 3286

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
}

Upvotes: 0

Comixtrovic
Comixtrovic

Reputation: 1

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
}

Upvotes: 0

Aravind
Aravind

Reputation: 41533

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>

Upvotes: 2

Related Questions