Carousel

Hi @itay,

This is my way:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  onActiveSlideChange(event) {
    const prevBtn = document.querySelector('.carousel-control-prev');
    const nextBtn = document.querySelector('.carousel-control-next');

    [prevBtn, nextBtn].map(button => button.classList.remove('d-none'));

    if (event.relatedTarget === 0) {
      prevBtn.classList.add('d-none');
    } else if(event.relatedTarget === 2) {
      nextBtn.classList.add('d-none');
    }
  }
}

and HTML

<mdb-carousel [animation]="'slide'" (activeSlideChange)="onActiveSlideChange($event)">
  <mdb-carousel-item>
    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide">
  </mdb-carousel-item>
  <mdb-carousel-item>
    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" alt="Second slide">
  </mdb-carousel-item>
  <mdb-carousel-item>
    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide">
  </mdb-carousel-item>
</mdb-carousel>