CODEWITHSUNDEEP
angular
Mathias
Mathias

Reputation: 4569

Show/Hide Event For Bootstrap 4 Modal In Angular?

I have a bootstrap modal where I want to call functions when it is shown or hidden. Is it possible? I tried with focus/blur. Those work but those get triggered multiple times depending on where you click.

Are there other events I could call just once each when the modal is shown or hidden?

<button class="btn btn-primary video-btn"
            data-toggle="modal"
            type="button"
            data-target="#myModal">Open Modal</button>

  <div class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-hidden="true"
      (focus)="modalShown()"
      (blur)="modalHidden()">Other content in here</div>

Upvotes: 0

Views: 3782

Answers (2)

user3777549
user3777549

Reputation: 419

I would definitely suggest that you migrate to ng-bootstrap and use those modals which are more intuitive. ngbootstrap modal tutorial

But, to do it without I would suggest using a Subject to emit and listen for the open close events. Here is a good video on how to use rxjs Subjects rxjs Subjects tutorial

After setting up the Subject, revise your functions, modalShown() and modalHidden(), to include a subject "next" event before firing the modal open/close.

import { Subject } from 'rxjs/Subject';

modalOpen(){
    this._mySubject.next("open");
    yourBootstrapModal.open();
}

Then subscribe the the event and perform your work

this.mySubject.subscribe(message=>{
    if(message === "open")
    {
        doWork....
    }
}

Above code is handwritten but will get you where you need to go.

Good luck!

Upvotes: 1

Jihoon Kwon
Jihoon Kwon

Reputation: 755

If you use ngx-bootstrap, you can define and use show/hide modal functions in .ts

.ts

import {Component, ViewChild} from '@angular/core';
import {ModalDirective} from 'ngx-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('childModalTest')
  public childModalTest:ModalDirective;
  public showChildModalOpen():void {
    this.childModalTest.show();
  }

  public showChildModalClose():void {
    this.childModalTest.hide();
  }
}

.html

<div>
  <a class="btn" (click)="showChildModalOpen()">show</a>
  <a class="btn" (click)="showChildModalClose()">hide</a>
</div>

And https://valor-software.com/ngx-bootstrap/#/modals would be helpful :)

Upvotes: 3

Related Questions