Enabling touchdrag for mobile devices or Refreshing owl carousel in angular

Question

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.

Answer 1

I used a hostlistener when the 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: ["<i class='fa fa-angle-left' aria-hidden='true'></i>", "<i class='fa fa-angle-right' aria-hidden='true'></i>"],
    nav: true,
    responsive: {
      0: {
        items: 4
      }
    }
  }

Answer 2

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