title: carousel issue | Angular 6
body: <p>I am using Angular 6 and I have topAdvertisementList[] is returning 2 records to be shown in my carousel with a fixed image to be shown, but I see only one record is shown in the carousel!, I think something wrong in my HTML script.</p>
  
  <p>could you please assist ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li *ngFor="let add of topAdvertisementList;  let i=index"
              data-target="#carousel-example-generic" data-slide-to="i" class="active"&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
              &lt;div *ngFor="let add of topAdvertisementList; let i=index" [ngClass]="{
                      'carousel-item active':i === 0,
                      'carousel-item':i &gt; 0 }"&gt;
                  &lt;img src="assets/modules/dummy-assets/common/img/photos/1.jpeg" alt="{{i}}"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="carousel-control-prev" href="#carousel-example-generic" 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="#carousel-example-generic" 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>
  </div>
  </div>
  </p>