Tengo una función de clic que abre un modal y el uuid del objeto, después de cambiar la etiqueta donde estaba la función en el html dejó de funcionar, ¿qué puede ser?

pd: tuve que poner el ícono en el medio del carrusel-slider para que apareciera en la pantalla

mi función y mi 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>

La versión anterior era:

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