-2

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

Exemplo de indicador de imagem no carrosel

1 Resposta 1

0

Consegui resolver com ajuda um amigo. A solução foi, no html, atribuí um id para cada item "li" concatenado ao número do index, no meu caso chamei de "imagemDestaque" + index e adicionei um evento de click do Angular.

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

Na chamada da função click, estou alterando o atributo de data-slide-to

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

Problema resolvido

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .