En nuestro componente HTML tenemos un modal con un nombre de referencia. Dentro de este modal tenemos botones para cerrar el modal.

Aquí está el código:

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

Para cerrarlo, actualmente llamamos por ejemplo (click)="confirmModal.hide()" . Usando el nombre de referencia.

Dado que estamos dentro del div con referencia #confirmModal , ¿es posible tener una forma de llamar a la función ocultar usando (click)="this.hide()"

Por supuesto, probé esta sintaxis y no funciona como se esperaba, ya this refiere al componente según tengo entendido.

Como beneficio adicional: ¿tiene alguna idea de dónde puedo encontrar información en Angular doc sobre esta sintaxis de referencia #reference para nombrar una parte de mi html? Lo uso sin saber exactamente todas sus posibilidades.