Subscribe button only works in the second click

Question

I have a button for each row of a grid, which when clicked, calls an subscribe that fills the data of that code clicked inside a modal. This button until it works, but not on the first click, but on the second. But when moving that subscribe into the ngOnInit, the button works at the first click, but when I enter my system the page takes a long time to load. I imagine it’s a waiting time to load the data, but I don’t know how to fix it.

My button calls the function clickDetail()

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

Seeing your code, I’m guessing there’s some conflict between Angular and Bootstrap. Have you tried not using the <a> tag as toggle for the bootstrap modal? If not, test, maybe this is it.

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