How to set the selected image as the first image to show in a bootstrap carousel in Angular?

Question

I have created a small tuto code in which I have a list of cards. on these cards I have a click event that pass the index of this cards that I will use it later to set the first image to show in carousel. This index is past via a service shared with the created components.

for now this index is past successfully, when I receive it in carousel component put it in <ngb-carousel [activeId]="activeIndex">, as montioned in the doc

 /**
 * The slide id that should be displayed **initially**.
 *
 * For subsequent interactions use methods `select()`, `next()`, etc. and the `(slide)` output.
 */
 activeId: string;

However, what I have done has no effect, because the carousel still show me the first image every time. Did I miss someting?

here you can find the source code: https://github.com/agentjoseph007/modal-carousel

Any help will be much appreciated.

Answer 1

try to play with images at the carousel constructor as it's an array you just move. you pick the index and you move the slide that matches that index at the first position. I’d recommend using a *ngFor at your carousel template.

in carousel.component.html

<ngb-carousel (slide)="onSlide($event)">
  <ng-container *ngFor="let slide of slides; let index = index">
    <ng-template ngbSlide [id]="index">
      <div class="picsum-img-wrapper">
        <img [src]="slide.image" [alt]="slide.alt">
      </div>
      <div class="carousel-caption">
        <h3>{{slide.label}}</h3>
        <p>{{slide.content}}</p>
      </div>
    </ng-template>
  </ng-container>
</ngb-carousel>

Maybe the community might have other proposition on how to handle the slides, but I propose to you this code and in carousel.component.ts

  photos = [944, 1011, 984].map((n) => `https://picsum.photos/id/${n}/900/500`);
  slides = [
    {
      index: 0,
      image: this.photos[0],
      label: 'First slide label',
      content: 'Nulla vitae elit libero, a pharetra augue mollis interdum.',
      alt: 'my first slide image'
    },
    {
      index: 1,
      image: this.photos[1],
      label: 'Second slide label',
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      alt: 'my first slide image'
    },
    {
      index: 2,
      image: this.photos[2],
      label: 'Third slide label',
      content: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.',
      alt: 'my first slide image'
    }
  ];

  ...

  constructor(private imageHandlerService: ImageHandlerService) {
    console.log('CarouselComponent');
    console.log(this.imageHandlerService.selectedIndex);
    this.slides.forEach((element, i) => {
      if (element.index === this.imageHandlerService.selectedIndex) {
        this.slides.splice(i, 1);
        this.slides.unshift(element);
      }
    });
  }

hope it helps ;)