title: How to do Angular *ngFor on bootstrap 4 carousel
body: <p>I am trying to use bootstrap 4 carousel as a content slider for angular 5 .</p>
  
  <p>I want to do an *ngFor and for the active carousel item, show 4 *ngFor results.</p>
  
  <p>This is what I've so far.</p>
  
  <pre><code>&lt;div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#carouselExampleIndicators" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#carouselExampleIndicators" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="carousel-item active"&gt;
            &lt;div class="row mar-30"&gt;
            &lt;div  class=" col-md-3" 
            *ngFor="let blog of blogs | async; let i = index"
            &gt;
            &lt;div *ngIf="i&lt;4"&gt;
                &lt;app-blogcard
                (checked)="OnChecked($event)"
                [blog]="blog"
                &gt;&lt;/app-blogcard&gt;
            &lt;/div&gt;
            &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" 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>
  
  <p>This will show just four items for the active carousel item because I did an *ngIf limit of 4. Is there anyway I can do this better without having to do another *ngFor on the next carousel item?</p>