Move ion-fab with GestureController

Ionic Framework
1

I want to try to make my ion-fab movable … I thought the best solution is to use the GestureController (correct me if I’m wrong) … I tried to create my gesture but I get an error that I can’t understand:

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading ‘__zone_symbol__addEventListener’)

my component:

export class HomeComponent implements OnInit, AfterViewInit {

@ViewChild("fab") fabRef: ElementRef;
  constructor(private gestureCtrl:GestureController) { }
  ngAfterViewInit(){
    console.log(this.fabRef)
    this.longPress();
  }
  ngOnInit() {}
  longPress(){
    const gesture = this.gestureCtrl.create({
      el: this.fabRef.nativeElement,
      gestureName: 'long-press',
      onStart: () => console.log('long-press Start')
    })
    gesture.enable(true)
  }
}

my template:

<ion-content>

  <ion-fab #fab horizontal="end" vertical="center" slot="fixed">
    <ion-fab-button color="dark">
      <ion-icon name="settings" color="danger"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button color="danger" (click)="openFilterModal()">
        <ion-icon name = "funnel" color="dark"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
    <ion-fab-list side="start">    
      <ion-fab-button color="danger">
        <ion-icon name = "heart" color="dark" (click)="openFavoriteModal()"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
    <ion-fab-list side="buttom">
      <ion-fab-button color="danger" (click)="openOrderModal()">
        <ion-icon name = "filter" color="dark"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
</ion-content>
2

I solved it by editing ViewChild in:

@ViewChild("fab", {static: true, read: ElementRef}) fabRef: ElementRef;

However, I leave the topic open to find out if my goal is in your opinion feasible or a lost cause