[BUG] [UPDATE: FIXED] –– [owlRouterLink] doesn't work as intended

[MilanObrenovic]

I implemented the same example that was given here: https://github.com/vitalii-andriiovskyi/ngx-owl-carousel-o/blob/develop/apps/demo-owl-carousel/src/app/link/link.component.html

And followed the documentation. It appears that, while dragging my carousel for the first time, it works. But now when i try to click, drag again, and unclick, the carousel item gets clicked. I don't want the items to be clicked after i'm done dragging.

TLDR; dragging works only for the first time, but every next time the carousel item gets clicked after dragging.

Can you reproduce this and let me know if this is a bug, and how to fix this?

[MilanObrenovic]

Since I got no response i have figured out a "hacky" way to solve this. Very sad and messy that i have to do this manually.

home.component.html:

<owl-carousel-o (changed)="getData($event)" [options]="owlCarouselConfig">
  <ng-container *ngFor="let item of items">
    <ng-template carouselSlide>
      <div (click)="onItemClick(item)" role="button">
        ...
      </div>
    </ng-template>
  </ng-container>
</owl-carousel-o>

home.component.ts:

public isDragging: boolean;

// This function gets triggered whenever a drag happened,
// so update the flag always to true.
public getData($event: SlidesOutputData) {
  this.isDragging = true;
}

public onItemClick(item: any) {
  if (!this.isDragging) {
    this._router.navigate([`/profile/${item.username}`]).then();
  }
  this.isDragging = false;
}

No need to even use [owlRouterLink] or dragging property as it was described in documentation, since they don't work properly. I think the maintainer of this library forgot to reset the isDragging boolean back to default after the first trigger on drag, because it works half way through until it doesn't. Very annoying bug. Until the maintainer replies here with a fix, i have no choice but to stick to using this custom messy solution

[MilanObrenovic]

Edit: this hacky solution works only if the slider is not in autoplay: true mode. Once the slides start autoplaying then i have to double click on a slide to trigger the route link... I'll try to find another hacky way to avoid this since it seems to be of a higher problem than i expected

[MilanObrenovic]

BUG FIXED (hacky way)

Finally I have found a hacky solution to fully fix this. The code is messy but there's no other way to do it as far as i can see unless the maintainer of this library fixes it.

This is how the code needs to be set:

<owl-carousel-o (dragging)="startDragging($event.dragging)" [options]="owlCarouselConfig">
  <ng-container *ngFor="let item of items">
    <ng-template carouselSlide>
      <div (click)="onItemClick(item)" role="button">
        ...
      </div>
    </ng-template>
  </ng-container>
</owl-carousel-o>

public onItemClick(item: any): void {
  if (!this.isDragging) {
    this._router.navigate([`/profile/${item.username}`]).then();
  }
  this.isDragging = false;
}

public startDragging(dragging: boolean): void {
  if (dragging) {
    this.isDragging = true;
  }
}

This solution fixes the following bugs:

• when you click on a carousel item on page load, the link item does not open
• when you click on a carousel item on page load on the 2nd time, the link item opens
• when you start dragging, the item link gets opened right after you stop dragging
• when you start dragging, the item link does not get opened but now when you click on an item, you need to double click it again to open it
• when you start dragging for the first time, it works fine, but on the second dragging the item gets clicked (this problem also occurs with [owlRouterLink] which the maintainer hasn't fixed yet)
• etc

There were a lot of edge case scenarios similar to those examples that i encountered. Can't remember them all. But as far as i have tested this solution fixes those

[MilanObrenovic]

Alternate solution

For anyone still struggling with this, i ended up switching the whole library. I replaced my carousel with Swiper Slider for angular. Works perfectly fine even with [routerLink] that doesn't get autoclicked after dragging is finished, unlike the bug that persists in this library. Until the maintainer of owl carousel fixes this bug, i'll stay with Swiper Slider

[EliezerB123]

Alternate solution

For anyone still struggling with this, i ended up switching the whole library. I replaced my carousel with Swiper Slider for angular. Works perfectly fine even with [routerLink] that doesn't get autoclicked after dragging is finished, unlike the bug that persists in this library. Until the maintainer of owl carousel fixes this bug, i'll stay with Swiper Slider

We're actually moving AWAY from Swiper, because it's awful to use and customize, and has zero Angular support.

Interesting to hear that you actually prefer it to Owl-carousel.