Angular/Ionic: Implement swipe gesture in tables

Question

I'm trying to implement a swiping function to create a pagination between tables. If you swipe to the right, you will go to the next page. If you swipe to the left, you will go to the previous page.

Here is the code of my table:

<table
 #tableElement
 id="zone-table-to-export-mobile"
 class="table mb-0"
>
 <tbody class="fs-4">
  <ng-container *ngIf="getZoneKey() as keysArray">
   <ng-container *ngIf="keysArray.length > 0">
    <ng-container *ngFor="let groupItem of keysArray">
     <tr>
      <td>{{ groupItem.group }}</td>
     </tr>
      <ng-container
       *ngFor="
       let key of getVisibleProps(groupItem.group)"
      >
       <tr>
        <td>{{ key }}</td>
        <td
         [innerHTML]="
         getZoneValue(
         statesResponse.zones[currentPage].groups, key)">
        </td>
       </tr>
     </ng-container>
    </ng-container>
   </ng-container>
  </ng-container>
 </tbody>
</table>

I think the problem is related with the fact that swipe works only with elements that are in the DOM. In my case, because of the pagination works using the variable currentPage, the content of the table for each page appears when you execute currentPage++.

I'm trying to implement this code, but doesn't seems to work. I'm using the toggle device toolbar inside Chrome Dev Tools, don't know if that could be the problem.

ngOnInit() {
  const gesture = this.gestureCtrl.create({
    el: document.querySelector('.table'), // Reemplaza con el selector correcto
    gestureName: 'swipe',
    onMove: (ev) => {
      const deltaX = ev.deltaX;
      
      const sensitivity = 50;
      
      if (Math.abs(deltaX) > sensitivity) {
        if (deltaX > 0) {
          this.changePage(-1);
        } else {
          this.changePage(1);
        }
      }
    },
  });
  gesture.enable(true);
}

changePage(increment: number) {
  const newPage = this.currentPage + increment;

  if (newPage >= 0 && newPage < totalPages) {
    this.currentPage = newPage;
  }
}

The other problem is related with the <table> HTML tag. If I try to access to that DOM element inside ngAfterViewInit lifecycle hook I got an undefined or null.

I don't want to use Hammer.js or other third party libraries. I want to implement the code with Ionic native gestures. Probably it doesn't work because I have to have all the tables available in the DOM at the same time, one on top of the other.

score 0 · Answer 1 · answered Aug 24 '23 at 07:12

Finally I found a solution using Hammer.js library. It is not as good as I wish but works for now.

this.timeOutId = setTimeout(() => {
 const hammer = new HammerGestureConfig();
 const swipe = hammer.buildHammer(this.tableElement.nativeElement);

 swipe.off('swiperight');
 swipe.off('swipeleft');
 this.currentPage = 0;

 swipe.on('swiperight', () => {
   if (this.currentPage > 0) {
     this.currentPage--;
   }
 });

 swipe.on('swipeleft', () => {
   if (this.currentPage < this.zonePaginationData.length - 1) {
     this.currentPage++;
   }
 });
}, 6000);

I have to use a timeout because of the structure of my DOM in which I have to wait until the table selector is available. It is not a clean solution but one that works.

Angular/Ionic: Implement swipe gesture in tables

1 Answers1