Trigger an event when my owl-caroussel reach a specific currentSlideIndex

1

I am bigginner in angular 4. In fact I am using owl-carousel in my angular 4 application as showen below:

 <div class="item" >
      <div  class="coupons-div" style="cursor:pointer;">
      <img src="..//..//assets/images/slider/slider1.gif"/>
      </div>
      </div>
      <div class="item">
          <div  class="coupons-div" style="cursor:pointer;">

          <img src="..//..//assets/images/slider/slider2.gif"/>

          </div>
          </div>
          <div class="item"  >
              <div class="coupons-div" style="cursor:pointer;">
              <img src="..//..//assets/images/slider/slider3.gif"/>ng 
              </div>

              <div class="carousel-caption d-none d-md-block">
                  <!-- layer 1 -->

                    <!-- layer 2 -->

                   <div class="layer-1-2 wow slideInUp" data-wow-duration="2s" data-wow-delay=".1s">
                    <h1 >
                    <ul>
                      <li *ngFor="let item of firstoptions">{{item}}</li>
                    </ul>  
                      </h1>
                 </div>
                    <!-- layer 3 -->
                    <div class="layer-1-3 hidden-xs wow slideInUp" data-wow-duration="2s" data-wow-delay=".2s">
                      <a class="ready-btn right-btn page-scroll"   routerLink="/" routerLinkActive="active" href="services" >Nos Services</a>
                      <a class="ready-btn page-scroll" href="produits">Nos produits</a>

                    </div>
                  </div>
              </div>
              <div class="item"  >
                  <div  class="coupons-div" style="cursor:pointer;">
                  <img src="..//..//assets/images/slider/slider4.gif" />

                </div>
                <div class="carousel-caption d-none d-md-block">
                  <!-- layer 1 -->

              <div class="layer-1-1 hidden-xs wow slideInDown" >
                  <h2 class="title1"></h2>
                                </div>  
                    <!-- layer 2 -->

                   <div class="layer-1-2 wow slideInUp" >
                    <h1 >
                    <div [@listAnimation]="items.length"
                    (@listAnimation.start)="logAnimation($event)"
                    (@listAnimation.done)="logAnimation($event)" >
                     <span *ngFor="let item of items" >
                         {{item}}
                      </span>
                    </div>  
                      </h1>
                 </div>
                    <!-- layer 3 -->

                  </div>
                  </div>
      </owl-carousel>

in component.ts

images=['..//..//assets/images/slider/slider1.gif','..//..//assets/images/slider/slider2.gif','..//..//assets/images/slider/slider3.gif','..//..//assets/images/slider/slider4.gif']
@ViewChild('owlElement') owlElement: OwlCarousel
ngOnInit() {
    console.log(this.owlElement);
    console.log("index is");
    console.log(this.owlElement.$owlChild.currentSlideIndex);
  }

I want to trigger an event when the fourth slide is showen. How can i do that. Note : I tried to use the currentSlideIndex but it didn’t work an error message appears telling that the currentSlideIndex is undefined.

OwlCarousel {differs: IterableDiffers, carouselClasses: "", options: {…}, $owlChild: OwlChild}$owlChild: OwlChild {el: ElementRef, owlClass: true, options: {…}, $owl: jQuery.fn.init(1), currentSlideIndex: 3}carouselClasses: (2) ["owl-theme", "sliding"]differ: DefaultIterableDiffer {_length: 4, _collection: Array(4), _linkedRecords: _DuplicateMap, _unlinkedRecords: null,  *previousItHead: IterableChangeRecord* , …}differs: IterableDiffers {factories: Array(1)}options: {items: 1, dots: false, nav: false, loop: true, autoplay: true, …}_items: (4) ["..//..//assets/images/slider/slider1.gif", "..//..//assets/images/slider/slider2.gif", "..//..//assets/images/slider/slider3.gif", "..//..//assets/images/slider/slider4.gif"] **proto** : Object home.component.ts:121 index is home.component.ts:123 undefined thank you..