How to open pDialog with a suscribe in Angular with primeNg

Question

I am trying that when I click on a 'td' of my table, which has a button, it launches a modal with that data

Is funny because when i click once, didnt apper the dialog, but if i click twice, the dialog appers..

My TS is:

export class PokemonTableComponent implements OnInit {

  showDialog = false;
  data: any;
  namePkm: any;
  constructor(private testApi: TestAPIService) {}

  ngOnInit(): void {}

  clickButton(pkmSelected: any) {
    // Call PokeApi and showDialog
    this.testApi.getPkm().subscribe((res) => {
      console.log(res);
      this.data = res;
      this.namePkm = this.data.name;
      this.showDialog = true;
    });
  }
}

My HTML:

<p-dialog header="Header" [(visible)]="showDialog" [style]="{ width: '50vw' }">
  <p>{{ namePkm }}</p></p-dialog
>


<hr />
<p-table
  [value]="pokemon"
  [tableStyle]="{ 'min-width': '50rem' }"
  [rows]="10"
  [showCurrentPageReport]="true"
  [rowsPerPageOptions]="[10, 25, 50]"
  [paginator]="true"
>
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-pkm>
    <tr>
      <td>
        <button pButton (click)="clickButton(pkm)">hey</button>
      </td>
    </tr>
  </ng-template>
</p-table>

My PkmService:

@Injectable({
  providedIn: 'root',
})
export class TestAPIService {

  getPkm() {
    return this.http.get(`https://pokeapi.co/api/v2/pokemon/ditto`);
  }
}