title: Pause and resume bootstrap 4 carousel using Typescript
body: <p>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:</p>
  
  <pre><code>&lt;div #carousel id="carouselControls" class="carousel slide" data-ride="carousel" [attr.data-interval]="interval"&gt;
          &lt;div class="carousel-inner" role="listbox"&gt;
              &lt;div *ngFor="let image of images, let i = index" class="carousel-item" [ngClass]="{'active' : i == 0}"&gt;
                  &lt;img data-toggle="modal" data-target="#imageModal" (click)="zoom(image)" [src]="image"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev"&gt;
              &lt;span class="fa fa-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next"&gt;
              &lt;span class="fa fa-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I switch the <code>interval</code> 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?</p>