title: Angular 6 - bootstrap carousel
body: <p>I'm creating carousel with bootstrap4 and images are coming from array. My problem is that first element must have the class <code>active</code>.</p>
  
  <pre><code>&lt;div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="carousel-item" *ngFor="let image of sliderImages" [ngClass]="image[0] ? 'active' : null"&gt;
        &lt;img class="d-block w-100" [src]="image" alt="First slide"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev"&gt;
      &lt;span class="carousel-control-prev-icon" 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="#carouselExampleFade" role="button" data-slide="next"&gt;
      &lt;span class="carousel-control-next-icon" 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>