Angular Variable Interpolation Problems 11 + Bootstrap 4

Question

I’m creating a carousel component to be reused in my Angular 11 project, I’m creating it using bootstrap 4. I’m having a problem with variable interpolation, I’ve tried several different ways, including using Property Binding, I honestly no longer know if it is possible to use this component of the dynamic form I need.

I am using the carousel with bootstrap indicators, as it is a component to be reused, as I am passing the images dynamically, the number of images will vary constantly. The transition between the images is working right to advance to the next one and/or return to the previous one, but when you click on the image indicator (example image in the post) it does not work. In the bootstrap component, a property called "data-slide-to" is passed that receives an index number that directs to the correct image when clicking, but as I am generating dynamically, it is not possible to manually set these values, I am trying to pass the index generated in *ngFor, but it is not working.

<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"
    ]
  }
}

Answer 1

I managed to solve with a friend. The solution was, in html, I assigned an id for each item "li" concatenated to the index number, in my case I called "imagemDestaque" + index and added an Angular click event.

    <li *ngFor="let imagem of urlImagens; let index = index" id="imagemDestaque{{index}}"
        data-target="#carouselImagens" data-slide-to="{index}" (click)="escolherImagem(index)"
        [ngClass]="{'active': index == 0}"></li>

In the function click call, I am changing the attribute of data-slide-to

  escolherImagem(index){
    document.getElementById("imagemDestaque" + index).setAttribute('data-slide-to', index);
  }

Problem solved