Swipe Vertical works, but doesn't update screen on device


I’m using a directive to allow swiping in all directions. Swiping fires procudures to update some data, then change the screen contents according to the data.

This works as expected on ionic serve, and android emulators, but on android devices (moto G and Samsung tablet behave the same), the vertical swipes always update the data, but the screen doesn’t change (sometimes it does on the second or third, but not to the current data). So the swipe is detected, but the message to update the screen is missing.

When I update the data with buttons, the app works as expected - both data and screen are updated correctly on the device.

I thought it might be something to do with change detection so I’ve got this.changeDetectorRef.detectChanges(); but it doesn’t make any difference if it’s on or off

Hammer.js says to test on device as you might need to configure things, the swipe is detected!

Any ideas? Thanks

Here is the directive

import {Directive, ElementRef, Output, OnInit, OnDestroy, EventEmitter} from '@angular/core';
import {Gesture} from 'ionic-angular/gestures/gesture';
declare var Hammer: any;

    selector: '[swipe-vertical]' // Attribute selector
export class SwipeVertical implements OnInit, OnDestroy {
    @Output() onSwipeUp = new EventEmitter();
    @Output() onSwipeDown = new EventEmitter();
    @Output() onSwipeLeft = new EventEmitter();
    @Output() onSwipeRight = new EventEmitter();

    private el: HTMLElement;
    private swipeGesture: Gesture;

    constructor(el: ElementRef) {
        this.el = el.nativeElement;

    ngOnInit() {
        this.swipeGesture = new Gesture(this.el, {
            recognizers: [
                [Hammer.Swipe, {direction: Hammer.DIRECTION_ALL}]
        this.swipeGesture.on('swipeup', e => {
            this.onSwipeUp.emit({ el: this.el });
            console.log("Swipe Up");
        this.swipeGesture.on('swipedown', e => {
            this.onSwipeDown.emit({ el: this.el });
            console.log("Swipe Down");
            this.swipeGesture.on('swiperight', e => {
            this.onSwipeRight.emit({ el: this.el });
            console.log("Swipe Right");
        this.swipeGesture.on('swipeleft', e => {
            this.onSwipeLeft.emit({ el: this.el });
            console.log (" Swipe Left");

    ngOnDestroy() {

Here is some of home.html

  <div swipe-vertical (onSwipeUp)="changeDescription(1)" (onSwipeDown)="changeDescription(-1)" (swipeleft)="changePicture(-1)"
  (swiperight)="changePicture(1)" >
  <table  class = "mainStuff" >
      <td >
         <img [src]="imgSource" alt="some_text" scroll="false">
     <td >
       Description Number {{descriptionNumber}} <br>
      Picture Number {{pictureNumber}}

and in home.ts - on of the procedures that updates the data

public changeDescription(descInc:number) : void {

  console.log("We have entered ChangeDescription with increment", descInc);
  console.log("Entered changeDescription ", this.descriptionNumber);  
       //change the reader icon for the main page
    switch (descInc) 
    case 1:{this.descriptionNumber=this.descriptionNumber +1 };
    case -1:{this.descriptionNumber=this.descriptionNumber -1};
    if (this.descriptionNumber==4) {this.descriptionNumber=0};
    if (this.descriptionNumber==-1) {this.descriptionNumber=3};   
 console.log("Leaving changeDescription - should read ", this.descriptionNumber);


I’ve got it working using this method:

Don’t need the directive. I have no idea why this works and the other way doesn’t, but I’ve had a glass of port and it works so I’m happy :slight_smile: