在Angular模板中使用此参考

Question

In ourcomponent HTML we have a modal with a reference name. Inside this modal we have buttons to close the modal.

Here is the code:

<div bsModal #confirmModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm modal" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Confirm</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="confirmModal.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body">
        <span>Are you sure ?</span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="confirmModal.hide()">Cancel</button>
        <button type="button" class="btn btn-danger" (click)="confirmModal.hide()">Refresh Data</button>
      </div>
    </div>
  </div>
</div>

To close it, we currently call for example (click)="confirmModal.hide()" . Using the reference name.

Since we are inside the div with reference #confirmModal , is it possible to maybe have a way to call the hide function using (click)="this.hide()"

Of course I tried this syntax and it doesn't work as expected as this refers to component as I understand.

As a bonus: do you have any idea where I can find information on Angular doc about this reference syntax #reference to name a part of my html? I use it without exactly knowing all its possibilities.

Answer 1

The #abc is called a template reference variable . You can find out more about it here: https://angular.io/guide/template-syntax#ref-vars