How to implement onChange event/ callbacks / custom dots in Owl Carousel (2) for angular 2/7

Question

I need to call a angular 7 function on changing owl carousels slide, I want to design a custom dots for my slides. could anyone help me please..

I have referred below docs

https://www.npmjs.com/package/ngx-owl-carousel

https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

<owl-carousel #owlElement [options]="sliderOptions" [carouselClasses]="['owl-theme', 'sliding']"></owl-carousel>


@ViewChild('owlElement', { static: false }) owlElement: OwlCarousel;

self = this;
sliderOptions = {
  items: 1, 
  dots: true, 
  nav: false, 
  navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"], 
  onChange: function () {
    console.log("change");
    self.changeCustomDots();
 }
};

ngOnInit() {}

changeCustomDots() {
  console.log("change custom dots styles here..");
}

Answer 1

Every new function created by function statement, defined its own this value based on how the function was called. so using arrow function will refer to current object

sliderOptions = {
  items: 1, 
  dots: true, 
  nav: false, 
  navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"], 
  onChange: () => {
    console.log("change");
    this.changeCustomDots();
 }
};