title: Angular Hiding Navigation Arrows
body: <p>I need to hide the navigation arrows in my carousel on the following condition:
  First you need to hide the prev navigation arrow when you are on the first slide and 
  Last you need to hide the forward navigation arrow when you are on the last slide.
  It is already working now. My problem is when i combine the videos and images. How can i hide the prev and forward navigation arrow since they are separate?</p>
  
  <p>Pls see this link <a href="https://stackblitz.com/edit/ng-bootstrap-carousel-multiple-image-video?file=app%2Fcarousel-basic.html" rel="nofollow noreferrer">CLICK HERE</a></p>
  
  <p><strong>CODE</strong></p>
  
  <pre><code>&lt;div [ngClass]="{'first': myCarousel?.activeId == '0', 'last': myCarousel?.activeId == imageUrls.length - 1}"&gt;
      &lt;!-- {{ myCarousel?.activeId }} --&gt;
  
      &lt;ngb-carousel #myCarousel [showNavigationArrows]="imageUrls.length &gt; 1 || videoUrls.length &gt; 1" [showNavigationIndicators]="false" interval="0"&gt;
          &lt;ng-template ngbSlide *ngFor="let url of imageUrls; let i = index" [id]="i"&gt;
              &lt;img class="active" [src]="url" /&gt;
            &lt;/ng-template&gt;
              &lt;ng-template ngbSlide *ngFor="let url of videoUrls; let i2 = index" [id]="i2"&gt;
                  &lt;video class="active" [src]="url" controls&gt;&lt;/video&gt;
              &lt;/ng-template&gt;
      &lt;/ngb-carousel&gt;
  
  &lt;/div&gt;
  </code></pre>