Enabling touchdrag for mobile devices or Refreshing owl carousel in angular-CodePudding

I am trying to enable touchdrag and mousedrag only for mobile devices.

customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navText: ['', ''],
    items: 4,
    responsive: {
      0: {
        touchDrag: true,
        mouseDrag: true
      },
      768: {
        touchDrag: false,
        mouseDrag: false
      }
    },
    nav: true
  }

Somewhere I read, carousel should be refreshed for changes to happen when resized. But everywhere they used jquery

$('owl-carousel').trigger('refresh.owl.carousel')

But I want to do it without using jquery as I am using owl-carousel-o tag and also owloptions. If there is some other way also please suggest.

CodePudding user response：

The docs already provides a solution for you.
Here I chose "initialized" event to change the options. Despite the name, it seemed to fire more than 1 time. So I put a flag there to make it run only once. Below is the link of working demo with Angular 14.

https://stackblitz.com/edit/angular-ivy-uznbfk?file=src/app/hello.component.ts

CodePudding user response：

I used a hostlistener when screen resizes, and assigned the values in there to change. It is working fine now. @HostListener('window:resize', ['$event'])

checkScreenSize(event?) {

this.isDesktop = window.innerWidth >= 768 ? true : false;
if (this.isDesktop) {
  this.customOptions.touchDrag = false;
  this.customOptions.mouseDrag = false;
}
else {
  this.customOptions.touchDrag = true;
  this.customOptions.mouseDrag = true;
}

}

customOptions: OwlOptions = { margin: 10, stagePadding: 10, loop: false, dots: false, navSpeed: 600, navText: ["", ""], nav: true, responsive: { 0: { items: 4 } } }