NgbCarousel select does not switch the slide

Question

I'm trying to create a thumbnails row to switch slides of the carousel.

The click event is working, the carousel is located correctly - I put some breakpoints in the NgbCarousel code, the passed slide id is correct and it works up to the very switching of the slide. However the slide switching is not happening.

Carousel itself works just fine - both the arrows and indicators.

Angular 6.1.0 Ng-bootstrap 3.2.0

UPDATE It started working after reinstalling node modules. Though it's very laggy (10 sec for img switch with no additional network request), but that's a different story.

Template:

<div class="thumbs mx-auto">
  <ul *ngIf="pics">
    <li *ngFor="let pic of pics" (click)="switchPic(pic)">
      <figure>
        <img src="{{ getIconUrl(pic) }}">
      </figure>
    </li>
  </ul>
</div>
<ngb-carousel #clotheCarousel="ngbCarousel" *ngIf="pics"
  showNavigationArrows="true"
  showNavigationIndicators="true"
  interval="0">
  <ng-template ngbSlide *ngFor="let pic of pics" id="{{ stripSlash(pic.public_id) }}">
    <figure>
      <img src="{{ getThumbUrl(pic) }}" alt="Pic">
    </figure>
  </ng-template>
</ngb-carousel> 

Component:

import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import _ from 'lodash';
import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-clothe-gallery',
  templateUrl: './clothe-gallery.component.html',
  styleUrls: ['./clothe-gallery.component.css']
})
export class ClotheGalleryComponent implements OnInit {
  @Input() pics: object[];
  @Input() private thumbWidth: number = 500;
  @Input() private thumbHeight: number = 500;
  @Input() private iconWidth: number = 100;
  @Input() private iconHeight: number = 100;
  @Input() private getCurrent: object;
  // @Output() slide = new EventEmitter();
  @ViewChild(NgbCarousel) carousel: NgbCarousel;
  private currentSlide: string;
  LOG: string = 'clotheGallery';

  constructor() { }

  ngOnInit() {
    console.log(this.LOG, this.pics);
    if (this.pics && this.pics.length) {
      this.currentSlide = this.pics[0]['public_id'];
    }
    // this.slide.emit({
    //   current: this.currentPic
    // })
  }

  onSlideEvent(event) {
    // console.log('event', event);
    // this.currentSlide = event.current;
    // this.slide.emit({
    //   current: this.currentPic
    // })
  }

  get currentPic() {
    return this.currentSlide;
  }

  getThumbUrl(pic) {
    return ClotheGalleryComponent.insertResizeParams(pic, this.thumbWidth, this.thumbHeight);
  }

  getIconUrl(pic) {
    return ClotheGalleryComponent.insertResizeParams(pic, this.iconWidth, this.iconHeight);
  }

  switchPic(pic) {
    console.log(this.LOG, 'switchPic', this.stripSlash(pic.public_id), this.carousel);
    this.carousel.select(this.stripSlash(pic.public_id));
  }

  stripSlash(item) {
    return item.replace('\/', '');
  }

  static insertResizeParams(pic, thumbWidth, thumbHeight): string {
    if (!pic || !pic.url) {
      return '';
    }
    let replace = 'upload';
    let params = `${replace}/w_${thumbWidth},h_${thumbHeight},c_fit`;
    return pic.url.replace(replace, params);
  }

}

Answer 1

Try to change:

@ViewChild(NgbCarousel) carousel: NgbCarousel;

to:

@ViewChild("clotheCarousel") carousel: NgbCarousel;

And use (but it may require index id):

this.carousel.activeId = this.stripSlash(pic.public_id);

instead of:

this.carousel.select(this.stripSlash(pic.public_id));

As well as:

<ng-template ngbSlide *ngFor="let pic of pics" id=" stripSlash(pic.public_id)">