Angular - close modal window with event

Question

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

Answer 1

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>