Angular Renderer listen() Function Not Working as Expected

Question

I'm trying to add a click event to dynamically created components, but the renderer.listen function doesn't seem to be working as expected. Here's my code:

updateCardTemplate(arr: CardData[]) {
  for (let i = 0; i < arr.length; i++) {
    const cardComponent = this.renderer.createElement("ion-card");
    cardComponent.classList.add("userCard");

    cardComponent.innerHTML = `
      <div>
        <img src="${arr[i].imgUri}">
      </div>
      <ion-card-header>
        <ion-card-title>${arr[i].username}</ion-card-title>
      </ion-card-header>
    `;

    this.renderer.appendChild(this.cards.nativeElement, cardComponent);

    // Add the click event here
    this.renderer.listen(cardComponent, 'click', () => {
      console.log("User clicked");
      this.router.navigate(["user-trainer-view"]);
    });
  }
}

When I click on the generated cards, nothing happens. The HTML generated for the cards looks correct, and I've checked the class 'userCard' is applied. There are no console errors, and the router is correctly configured for navigation. What could be causing this issue, and how can I fix it?