Looking at the bootstrap documentation I saw that it has a specific method to hide the modal via jquery:
.modal('hide')
$('#myModal').modal('hide')
The problem is that I use angular, so I need a way to call this function through typescript. Using jquery in my scenario is not feasible and I need to remove it through typescript because it will only be closed after a successful http request.
I was able to do the following:
I set a local variable for the close button with the modal data-dismiss:
<button [disabled]="loadingVinculacao" #fechaModalVinculacao type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
In typescript I accessed it through viewchield:
@ViewChild('fechaModalVinculacao') fechaModalVinculacao: ElementRef; //Acesso ao elemento do dom
Click the close button through typescript if my request is successful:
this.fechaModalVinculacao.nativeElement.click(); //Fecha o modal se a requisição for feita com sucesso