NgbCarousel select does not switch the slide

ngbmodal
ngx-bootstrap carousel slide animation
ng-bootstrap
ngb-carousel
angular carousel
ngbpopover
angular 8 carousel
ngbtooltip

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);
  }

}

I'am not sure about your ViewChild(NgbCarousel). Are you sure your console.log(this.carousel) show the carousel? By the way you can use the reference variable in your function

<!--pass "clotheCarousel" in the function-->
<li *ngFor="let pic of pics" (click)="switchPic(clotheCarousel,pic)">

and

//use carousel, not this.carousel
switchPic(carousel:any,pic) {
    console.log(this.LOG, 'switchPic', this.stripSlash(pic.public_id), carousel);
    carousel.select(this.stripSlash(pic.public_id));
  }

NgbCarousel select does not switch the slide - angular - html, 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  Angular responsive image carousel implementation tutorial using the ng-bootstrap tutorial version 8 and 9. There are a number of options available for an Image/ Content Carousel in Angular project, but Bootstrap Carousels are pretty much popular among developers due to their easy implementation and very fewer dependencies.

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

carousel expose an event of index change · Issue #1331 · ng , The first chart is ok but the other charts does not show if I don't reload it when is in the active slide. So I need that event for refresh the charts. 'ngb-carousel' is not a known element: 1. If 'ngb-carousel' is an Angular component, then verify that it is part of this module. 2. If 'ngb-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ngb-carousel> My package.json

It's a bit tricky, the selector is 'ngb-slide-X' with X the current index from 0.

Let's say you have a table, and when you click on a row, you want to update a picture.

@ViewChild(NgbCarousel, { static: true }) carousel: NgbCarousel;

...

click(id: number, i: number) {
  this.carousel.select('ngb-slide-' + i);
}
   <tbody>
  <tr *ngFor="let signature of signatures$|async; index as i" (click)="click(signature.id, i)" [ngClass]="{selected: signature.selected}">
    <th scope="row">{{ i + 1 }}</th>
    <td>{{ signature.date | date:'shortDate' }}</td>
    <td>{{ signature.client }}</td>
    <td>{{ signature.chauffeur }}</td>
    <td>{{ signature.signataire }}</td>
  </tr>
</tbody>

.....

 <ngb-carousel id="carousel" [showNavigationArrows]="false" [showNavigationIndicators]="false">
  <ng-template ngbSlide *ngFor="let signature of (signatures$ | async)">
    <div class="picsum-img-wrapper">
      <img [src]="signature.url || '/assets/img/none.png'" alt="signature.caption">
    </div>
    <div class="carousel-caption">
      <p>{{ signature.caption }}</p>
    </div>
  </ng-template>
</ngb-carousel>

ngCarousel: need info (non on internet) on how to call select , GitHub is home to over 50 million developers working together to <ngb-​carousel #myCarousel="ngbCarousel">; give slides you want to select id, ex. As this is a support request, please don't open those here on GitHub  ngb-carousel – It’s an directive which is used as a container element for the overall carousel. And inside of there, we have defined a number of slides and these slides have been defined by ng-template. ng-template – It’s a directive which is used as slide with the help of ngbSlide directive.

Angular powered Bootstrap, Selector ngb-carousel. Exported as ngbCarousel. Inputs For subsequent interactions use methods select() , next() , etc. and the (slide) output. Type: string. interval since 2.2.0. If true , will pause slide switching when mouse cursor hovers the slide. If not provided, will be generated in the ngb-slide-xx format. Type: string  Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

Angular 10/9/8 Responsive Carousel Examples, There are multiple Angular Carousel packages available online to To display every slide we use the ng-template directive and attach ngbSlide attribute with it. NgBootstrap does not provide any official API for animating bootstrap NgbCarousel is a component provided by NgBootstrap, and It helps in  In this post, we will discuss another very important Web Component available in Ng-Bootstrap library which is a Carousel.Using Carousel we can add a Content or Image slider with many usable options.

Angular Animate Ngbcarousel navigation indicators, puff are several, several thing to do. First animate the carousel, see this question in SO Second animate the indicators. if you want only show a  When we bought our RV, the slideout switch was not properly installed. In this video, I show how I repaired the switch. http://www.rv-project.com/repairs/swi

Comments
  • Thank you for reply. ViewChild returns the correct carousel - it has the exact elements I put there. However when I do like you suggested, I get Cannot read property 'select' of undefined error
  • put only one *ngIf="pics" at first or your .html -not one for carousel and another one for ul-
  • that's totally reasonable
  • Thank you! But nothing changed, it still does not switch.
  • btw, if ngb-slide-X doesn't suite, you can specify the id.... see github.com/ng-bootstrap/ng-bootstrap/issues/1608
  • Thank you for your time, Vincent, but this is not really timely for me. Maybe I'll come back later.
  • The solution is in the select function just as @VincentGODIN mentioned: this.carousel.select('ngb-slide-' + i);