Gestures at angle 9 with hammerjs

Question

I’m trying to use the hammerjs to capture the swipe in the mobile version of my application, however, the event swipe seems not to be recognized since the console.log within it is not logged.

App.modulets.

...
import * as Hammer from 'hammerjs';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

@Injectable()
export class HammerConfig extends HammerGestureConfig {
  overrides = { swipe: { direction: Hammer.DIRECTION_HORIZONTAL } as any };
}

@NgModule({
  ...
  providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: HammerConfig },
...

meucomponente.component.ts

swipe(evt) {
  console.log(evt);
  const x = Math.abs(evt.deltaX) > 40 ? (evt.deltaX > 0 ? 'right' : 'left') : '';

  this.eventText += `${x}<br/>`;
}

meucomponente.component.html

<form [formGroup]="myForm" (swipe)="swipe($event)">
  <div formArrayName="iatas"
    *ngFor="let iata of myForm.controls.iatas?.value; let i = index; trackBy:trackByFn">
    <div [formGroupName]="i">
      <mat-form-field>
        <mat-label>Informe a Gaiola</mat-label>
        <input matInput name="gaiola" type="text" formControlName="gaiola">
      </mat-form-field>
      <mat-form-field>
        <mat-select formControlName="iata" [multiple]="true" placeholder="Iatas">
          <app-mat-select-search [formControl]="iataMultiFilter"></app-mat-select-search>
          <mat-option *ngFor="let iata of filteredIata | async" [value]="iata.id">
            {{iata.descricao}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <button mat-mini-fab color="warn" (click)="removeGroup(i)">
        <mat-icon>remove</mat-icon>
      </button>
    </div>
  </div>
</form>

If I use the event (click), log is done normally. Where can I be missing ?

Stackblitz simplified example.

Answer 1

After losing all day, I found the problem, I leave here for future reference.

It is necessary to import the HammerModule package @angular/platform-browser in the app.module.ts and list it in imports of the same file.

import { BrowserModule, HAMMER_GESTURE_CONFIG, HammerGestureConfig, HammerModule } from '@angular/platform-browser';

...

@NgModule({
  imports:      [
    ...
    HammerModule
  ],