Using Angular 2 to bind the close event of a modal

What is the correct method for stopping a YouTube embedded video in Angular 2?

In AngularJS, using JQuery to modify the iframe's src property was the recommended approach, but this should be avoided in Angular 2. Stop Youtube video after modal close

In Angular 2, direct manipulation of the DOM is not advised, so my embedded iframe retrieves its src property from a variable within my component. When I unset this property, the video stops playing as intended.

The (close) binding to the button works effectively, but it does not halt playback when clicking outside of the modal.

I have attempted to bind (close), (hide), (hidden), and (dismiss) to my modal div, but none of these options have proven successful.

I am curious if a solution like the following is feasible:

<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>
javascripttwitter-bootstrapangulartypescript

Answer №1

For a smoother transition, it is recommended to utilize the (onHidden) event which gets activated once the modal has been hidden and all CSS transitions are finished. Remember to emit the value within this particular method.

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

Answer №2

If you are utilizing ngx-bootstrap modal, remember that the event name to use is (onHide). Ensure to locate the html template containing your modal using the @ViewChild reference, typically named as #modal

<div bsModal #modal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" (onHide)="onModalHide($event)">
Remember to implement a method for handling this event within your code 
onModalHide(event){
// place your specific code here
}

Answer №3

When working with Angular 7, the following methods have proven to be effective for me.

  • Utilizing JQuery
$('#banner_video_modal').on('hidden.bs.modal', function () {
  // your code
});
  • Using click event listener

By using the click event, you can trigger actions such as hiding, dismissing, or closing the modal.

- ***.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
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

If I deselect an item, the "check all" option does not become deselected

I recently designed a page that displays all the weekdays and dates from Monday to Sunday. I added a feature where users can check all the weekdays with a single click, and uncheck them with another click. However, I encountered an issue where unchecking a ...

javascriptangulartypescript

Update the styling for the second list item within a specified unordered list class instantaneously

Looking to emphasize the second list item (li) within a selected dropdown list with a designated unordered list class of "chosen-results". <div class="chosen-container chosen-container-single select-or-other-select form-select required chosen-proc ...

javascriptjquerycss

Incorporate an additional column into a table using AngularJS

I attempted to insert a new column upon clicking a button, but unfortunately, I was unsuccessful. I have created a JSFiddle demo to illustrate my issue. Any assistance in resolving this problem would be greatly appreciated. Below is my attempt: $scope.a ...

javascriptangularjsloops

Angular ReactiveForms not receiving real-time updates on dynamic values

I'm using reactive forms in Angular and I have a FormArray that retrieves all the values except for product_total. <tbody formArrayName="products"> <tr *ngFor="let phone of productForms.controls; let i=index" [formGroupName]="i"> ...

angulartypescriptangular-reactive-formsformarray

Develop various Checkboxes using JavaScript

I am attempting to dynamically create multiple checkboxes using JavaScript. I have written the following code: var response= data; var container = document.createElement('div'); var checkboxContainer = document.createElement(&apo ...

javascriptjqueryhtmltwitter-bootstrapcheckbox

Angular Karma issued a WARNING about a 404 error during the test execution on the web server

I've been struggling to set up a foundation for implementing angular2, sass, and ng2-bootstrap. This particular project is derived from the angular2-seed project, and you can access the entire codebase here: https://github.com/omargon/angular-seed-sas ...

angulargulpkarma-runnerkarma-jasminekarma-coverage

Utilizing Dynamic Object Keys in Request Body within Nest JS

I am new to Nest JS and I have a query regarding the possibility of having a dynamic object key in the request body. Can it be structured like this: "123456":{ "item 1": "etc", "item 2": "etc2" }, &qu ...

javascriptnode.jsjsonapinestjs

Utilize AngularJS to loop through a list with ng-repeat

Seeking guidance as an Angular newbie. The ng-repeat in question is formatted as: ng-repeat="f in drillDownList['D' + d.merchMetrics.DEPT_NBR + 'CG' + d.merchMetrics.CATG_GRP_NBR + 'C' + d.merchMetrics.DEPT_CATG_NBR] M ...

javascriptangularjs

How can I redirect the page in CodeIgniter after successfully validating?

Currently, I am utilizing CodeIgniter for my project's development and implementing field validation using Bootstrap validator. Although the Bootstrap validator is functioning properly, I am encountering an issue. Upon successful validation, I expect ...

javascriptphpcodeigniter

JavaScript or Query: Transforming an Object from an Associative Array

Can someone help me out with converting an associative array into an object in JavaScript? I tried searching on Stackoverflow but couldn't find a working example. Here is the example structure: var combinedproducts = [["Testing-1","test-1"],["Testin ...

javascriptjqueryarraysobject

Why isn't the real-time database updating properly?

addNewDevice(deviceId: string, fireId: string){ let Token: string; let UserId: string; let newlyAddedDevice: Device; return this.authSrv.userId.pipe(take(1), switchMap( userId => { UserId = userId; retur ...

typescriptfirebaseionic-frameworkfirebase-realtime-database

Leveraging the power of AWS API Gateway and Lambda for seamless image upload and download operations with Amazon

I have successfully created a lambda function to handle image uploads and downloads to s3. However, I am encountering difficulties with the proxy integration from the API Gateway. Despite reviewing the documentation and looking at this specific question ...

javascriptnode.jsamazon-s3aws-lambdaaws-api-gateway

Notification from Socket.io following completion of database update

Can messages be sent to all users when the admin makes changes to the database, for example using the alert function? Scenario: Users are browsing car offers and while doing so, the admin changes the prices of a few offers --> users receive notificatio ...

javascriptmysqlnode.jssocket.io

Display or conceal a field depending on the user's input

I need to display a checkbox only when the firstname matches abc or if the email is [email protected]. var x = abc; //will be dynamic var y = abc @gmail.com jQuery("#firstname").on('change', (function(avalue) { return function(e) { ...

javascriptjqueryonchange

A guide to filtering out items from observables during processing with RxJS and a time-based timer

I have a complex calculation that involves fetching information from an HTTP endpoint and combining it with input data. The result of this calculation is important for my application and needs to be stored in a variable. async calculation(input: MyInputTy ...

javascriptnode.jstypescriptrxjsreactive-programming

Discovering the specific details of a user post-listing them through the *ngFor directive

I am currently using *ngFor to display individual list items with my clients' data. Each client is represented by its own list item. My goal is to make each list item clickable so that users can navigate to a page displaying the individual client&apos ...

angularobservablehttprequest

Why won't my setTimeout function work?

I'm having trouble working with the setTimeout function, as it doesn't seem to be functioning properly. First and foremost, Player.prototype.playByUrl = function (url) { this.object.data = url; return this.play(); } The co ...

javascript

Is it possible to create a looped GLTF animation in three.js using random time intervals?

I am currently exploring the world of game development with Three.js and have a specific query regarding animating a GLTF model. Is it possible to animate the model at random intervals instead of in a continuous loop? In the game I am creating, players wil ...

javascriptanimationthree.jsgltf

Disable other actions during jquery change event validation

Is there an answer for this question already? If so, I apologize! Here is my situation: I have an edit field that is validated when the .change() event occurs. What I am trying to achieve is this: if a user types something and then immediately clicks the s ...

javascriptjquery

What should we name this particular style of navigation tab menu?

What is the name of this tab menu that includes options for next and previous buttons? Additionally, is there a material-ui component available for it? https://i.sstatic.net/0m9rH.png ...

javascriptcssreactjsmaterial-ui