Functions not running when called through HammerJS

Question

I have a component that shows information for days that are cycled through with functions dayUp() and dayDown(). They both look like the following:

  dayUp() {
    if (this.dayCount == 7) {
      return;
    }
    this.dayCount++;
    if (this.dayCount == 0) {
      this.today = 'Today'
    } else if (this.dayCount == 1) {
      this.today = 'Tomorrow'
    } else if (this.dayCount == -1) {
      this.today = 'Yesterday'
    } else {
      this.today = '';
    }
    this.getSelectedDay(this.dayCount);
  }

I am calling these functions with buttons for each one. They work as expected and updates the view with the new information accordingly. I am tying to add swipe functionality to do the same thing with gestures using HammerJS. I have it set up and the swipes are working with the correct directions. I have a console log to test. I have the dayDown() set to swipe left and dayUp() set to swipe right. I can tell from the debugger that they are both indeed being called correctly and the function is running and changing the value of the dayCount variable. The issue is that the view is not updating or responding at all like it does when the functions are called from the button. To be clear, I am calling the same exact function with the button as well as the swipe. The buttons work as expected but they are not working when called through the swipe. I'm not sure what is causing this. The HammerJS code is below:

    const switcher = document.getElementById('switcher');
    var mc = new hammer(switcher);
    mc.on('swipeleft', () => {
      console.log('left');
      this.dayDown();
    });
    mc.on('swiperight', () => {
      console.log('right');
      this.dayUp();
    });

Answer 1

Update

You can also try to inject ChangeDetectorRef and put this.changeDetectorRef.detectChanges() in the callback functions after calling your own functions

private @ViewChild("myDiv") myBtn: ElementRef;

constructor(private changeDetectorRef: ChangeDetectorRef){}

myFunction() {
  const switcher = this.myBtn.nativeElement;
  var mc = new hammer(switcher);
  mc.on('swipeleft', () => {
    console.log('left');
    this.dayDown();
    this.changeDetectorRef.detectChanges()
  });
  mc.on('swiperight', () => {
    console.log('right');
    this.dayUp();
    this.changeDetectorRef.detectChanges()
  });
}

---

Old Answer

You need to run the code inside the ngZone so as the variables are being changed outside the Angular scope as they are callbacks for the Hammerjs APIs.

The other thing that it is always better to access the DOM elements using the ViewChild instead of directly access it using the getElementById, querySelector ...etc

private @ViewChild("myDiv") myBtn: ElementRef;

constructor(private zone: NgZone){}

myFunction() {
  this.zone.run(_ => {
    const switcher = this.myBtn.nativeElement;
    var mc = new hammer(switcher);
    mc.on('swipeleft', () => {
      console.log('left');
      this.dayDown();
    });
    mc.on('swiperight', () => {
      console.log('right');
      this.dayUp();
    });
  });
}

You can check this tutorial for more info: https://indepth.dev/gestures-in-an-angular-application/

Answer 2

You need to instantiate with new Hammer(switcher)(H on Capital latter). That's why on methods are not running because they can't find the object.