Ngx-bootstrap: can't display active slide image by itself unless slide is the first one

[quiringk]

I have a list of "files" that contain images. When I click on one of the files, I want to open the carousel in a modal to that specific file's image. Here is my carousel's html:

<div class="modal-body">
       <carousel>
            <slide *ngFor="let file of files" class="slide" [active]="file.activeSlide">
                <img [src]="file.thumbnail" class="slide-img">
                <div class="carousel-caption">
                    <p>{{file.fileName}}</p>
                </div>
            </slide>
        </carousel>
</div>

and I call this function when a specific file is selected trying to display that specific file's image by making it and only it active:

openSlideShow(file: FileModel){
        for(var f of this.files) {
            f.activeSlide = false;
        }
        file.activeSlide = true;
    }

however, if on the first click I select any of the files besides the first one, the first one's image displays above whatever one I clicked on. (like it is one long vertical slide made of both images.) But then when I click on the first file, and then another one after, it works fine like I except going forward for any of the files. I can't figure out why that first file's image always displays even though I manually set activeSlide to false.

[quiringk]

basically how do you set a slide to be active using the [active] attribute or [index] or something without any of the other slides also being active?

[valorkin]

@quiringk ok you need to:

1. inject carousel instance into your carousel, see modal sample at demo
   http://valor-software.com/ng2-bootstrap/#/modals (control from parent component)
2. then use select and pause methods of carousel

[quiringk]

@valorkin I am confused by your answer. Inject carousel instance into my carousel, see modal sample? Can you provide some example code that shows how to do this? Also, I see the pause property on your docs but I don't see a select property. Am I missing something?

[quiringk]

I know this is old but I just got this to work after I upgraded to angular 2 final. I added the changes from the " feat(carousel): added onSlideChanged event " branch that is currently hanging out to the most current live branch (1.1.5). I then ran npm pack and installed the generated tarball instead of pulling the package from npm. And then I used the currentSlide setter to change the active slide like so

var x = 0
for(var f of this.files) {
if(f === file){
this.carousel.currentSlide.active = false;
this.carousel.currentSlide = this.carousel.slides[x];
this.carousel.currentSlide.active = true;
break;
}
x += 1;
}

[valorkin]

Will be merging fix tomorrow

[valorkin]

fix is merged an available in latest versions please try it