angular – Button that triggers subscribe only works on second click

Question:

I have a button for each line of a grid, which when clicked, calls a subscribe that fills in the data of that code clicked inside a modal. This button actually works, but not on the first click, but on the second. But when I move this subscribe into ngOnInit , the button works on the first click, but when I enter my system the page takes a long time to load. I imagine it's a wait time to load the data, but I don't know how to solve this.

My button calls the clickDetail() function

<a type="button" #modal data-toggle="modal" data-target="#exampleModal" (click)="clickDetail()"></a>

my TS file

clickDetail () {
  this.diarioCarteiraService.getCarteiras(this.codigoCarteira).subscribe(res => {
    this.listaCarteira = res.data;   
  });
}

My Service

getCarteiras(codigoCarteira: number): Observable<ResponseDiarioCarteira> {
  return this.http.get<ResponseDiarioCarteira>(`${this.urlApi}/${'diario- carteira?codigo='}${codigoCarteira}`, super.ObterAuthHeader());
}

Answer:

Looking at your code I assume there is some conflict between Angular and Bootstrap. Have you already tested not using the <a> tag as a toggle for the bootstrap modal? If not, test, maybe that's it.

If this is the problem, the solution is to open the modal programmatically, using, for example, the subscribe of the return of the getCarteiras method.