Estou criando um componente de carrosel para ser reutilizado no meu projeto Angular 11, estou criando ele usando o bootstrap 4. Estou tendo um problema com a interpolação de variável, já tentei de várias formas diferentes, inclusive usando property binding, sinceramente já não sei se é possível utilizar esse componente da forma dinâmica que preciso.
Estou utilizando o carrosel com indicadores do bootstrap, como é um componente para ser reaproveitado, como estou passando as imagens dinamicamente, o número de imagens irá váriar constantemente. A transição entre as imagens está funcionando certo para avançar para a próxima e/ou retornar para a anterior, porém ao clicar no indicador da imagem (imagem de exemplo na postagem) ele não funciona. No componente do bootstrap, é passado uma propriedade chamada "data-slide-to" que recebe um número de índice que direciona para imagem correta ao clicar, porém como estou gerando dinamicamente, não é possível setar manualmente esses valores, estou tentando passar pelo index gerado no *ngFor, mas não está funcionando.
<div id="carouselImagens" class="carousel slide" data-ride="carousel" *ngIf="urlImagens.length > 0">
<ol class="carousel-indicators">
<li data-target="#carouselImagens" *ngFor="let imagem of urlImagens; let index = index" data-slide-to="{{index}}"
[ngClass]="{'active': index == 0}"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item" *ngFor="let imagem of urlImagens; let index = index"
[ngClass]="{'active': index == 0}">
<img class="imagem-background" src="{{imagem}}">
<div class="carousel-conteudo-imagem">
<img class="imagem-carousel-destaque" src="{{imagem}}">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselImagens" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselImagens" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-carousel-imagens',
templateUrl: './carousel-imagens.component.html',
styleUrls: ['./carousel-imagens.component.css']
})
export class CarouselImagensComponent implements OnInit {
@Input() urlImagens: string[];
constructor() { }
ngOnInit(): void {
this.urlImagens = [
"assets/img/teste1.jpg",
"assets/img/teste2.jpg",
"assets/img/teste3.jpg",
"assets/img/teste4.jpg"
]
}
}