Pause and resume bootstrap 4 carousel using Typescript

Question

I'm writing an Angular 4 app using bootstrap 4 beta and I want to stop the carousel when the user clicks an image because there will be a modal coming up. Once the modal is closed then it can resume the carousel. What I have found though is that when I load the carousel, it doesn't matter if I change any of the attributes, it won't bind to the new settings. My HTML is:

<div #carousel id="carouselControls" class="carousel slide" data-ride="carousel" [attr.data-interval]="interval">
        <div class="carousel-inner" role="listbox">
            <div *ngFor="let image of images, let i = index" class="carousel-item" [ngClass]="{'active' : i == 0}">
                <img data-toggle="modal" data-target="#imageModal" (click)="zoom(image)" [src]="image">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
            <span class="fa fa-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
            <span class="fa fa-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

I switch the interval field of my component from 5000 to false (boolean false) and I can see that when I debug it however the carousel doesn't seem to accept it. My question is then: How can I toggle that using Typescript - assuming that's the way to go?

Answer 1

It appears that you are using JS / JQuery - based version of Bootstrap. It might be possible to do it that way, but the library just wasn't designed to use Angular's binding mechanism.

You might consider using ngx-bootstrap, which is a version of the Bootstrap library that is written to interoperate with Angular, and does use Angular's binding mechanism.