Angular - close modal window with event

user_6157936 0
Viewed 72608

I would like to fire an event when the close button is clicked within the modal window. The button has the attribute data-dismiss="modal" and doesn't call the click event. Is it possible to have data-dismiss and click event or only click event and close modal from class? 

<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" (click)="close()">&times;</button>
    <h4 class="modal-title">{{modalHeader}}</h4>
  </div>
 </div>
</div>


close() {
    //Can I close modal window manually?
    this.onClose.emit();
  }

Method close dont call because button has data-dismiss attribute.

Thank you

angular
5 Answers

In angular, use [hidden] attribute to show/hide the model popup, and remove data-dismiss="modal" in your close button

try this 

<div [hidden]="IsmodelShow" class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="close()">&times;</button>
        <h4 class="modal-title">{{modalHeader}}</h4>
      </div>
     </div>
    </div  

close() {
    this.IsmodelShow=true;// set false while you need open your model popup
   // do your more code
}

Update

just add data-target="#modal" in your div and it will be works 

<div class="modal-dialog" data-target="#modal">
 <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" (click)="close()">&times;</button>
    <h4 class="modal-title">{{modalHeader}}</h4>
  </div>
 </div>
</div>


close() {
//write your code
}

Update 2

You need to set data-target as target id of your modal and data-toggle = "modal" to the button on which you want to activate the modal

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" data-target="#myupdate" data-toggle="modal" class="btn btn-info btn-lg">Update</button>

  <!-- Modal -->
  <div class="modal fade" id="myupdate" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">New Update </h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" (click)="close()">Close</button>
        </div>
      </div>
    </div>
  </div>

user_22186350

In your close function add this

close() {
    $("#myModal").modal("hide");
}
user_65555720

Add this line on top before @Component starts.

declare var $: any;
user_128721800

You cannot have the data-dismiss="modal" and call a function, instead inside your close function do the following:

close() {
    $('.modal').modal('hide');
}

I'm assuming you're using bootstrap, so you're using jQuery.

user_56580600

data-dismiss property is important. I just use it and got the success.

if you want to perform any additional operation on closing then handle the onClick event as below

user_149307090
Related