I have a click function that opens a modal and the object's uuid, after I changed the tag where the function was in the html it stopped working, what can it be?

ps: I had to put the icon in the middle of the carousel-slider to make it appear on the screen

my function and my html:

openBannerDeleteModal(uuid ? : string): void {
  if (!uuid) return;
  const width = innerWidth <
    1024 ? '100%' : '40%';
  const dialogRef = t his.matDialog.open(BannerDeleteComponent, {
    height: '20%',
    width: width,
    data: {
      uuid: uuid,
    },
  });
  dialogRef.afterClosed().subscribe(async(result) => {
    if (result) this.banners = await this.BannerService.getBanner();
    window.location.reload();
  });
}

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true">
                    </span>
  <span class="sr-only">Previous</span>
</a>
<i (click)="openBannerDeleteModal(banner.uuid)" *ngIf="isAdminFlag==='true'" class="fas fa-trash-alt delete-modal" id="banner-delete" aria-hidden="true"></i>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true">
                    </span>
  <span class="sr-only">Next</span>
</a>
</div>
</div>

The previous version was:

<div class="carousel-inner">
  <div class="banner carousel-item {{ i === 0 ? 'active' : '' }} it-1" *ngFor="let banner of banners; let i = index">
    <div id="tilt" class=" tiltElement carousel-caption">

      <i (click)="openBannerDeleteModal(banner.uuid)" *ngIf="isAdminFlag==='true'" class="fas fa-trash-alt delete-modal" id="banner-delete" aria-hidden="true"></i>

      <div class="vertical-line"></div>
      <div>