Argument of type Event is not assignable to parameter of type PanGestureEventData - nativescript

Question

I'm building an NativeScript app using angular flavor. In the HTML side I've tried to bind to an TouchEvent but this is the error that I've got.
Error message:
Argument of type 'Event' is not assignable to parameter of type 'PanGestureEventData'.
Type 'Event' is missing the following properties from type 'PanGestureEventData': deltaX, deltaY, state, view, and 4 more.ngtsc(2345)
component.html
<Label
class="content-drawer"
(pan)="onPanMoveContainer($event)"
alignSelf="center"
textAlignment="center"
[text]="'fa-window-minimize' | fonticon"
class="fa"
fontSize="20"
></Label>
component.ts
import { AfterViewInit, ChangeDetectorRef, Component, OnInit } from '#angular/core';
import { BottomSheetLayoutBaseComponent } from '#loyaltyversion2/xplat/features';
import { PanState } from '#loyaltyversion2/xplat/nativescript/utils';
import { PanGestureEventData, View } from '#nativescript/core';
#Component({
moduleId: module.id,
selector: 'app-bottom-sheet-layout',
templateUrl: './bottom-sheet-layout.component.html',
styleUrls: ['./bottom-sheet-layout.scss'],
})
export class BottomSheetLayoutComponent
extends BottomSheetLayoutBaseComponent
{
private currentContentTransitionY = 200;
constructor() {
super();
}
onPanMoveContainer(event: PanGestureEventData) {
// TODO: why can't we use TouchGestureEventData
this.moveContentToLocation(this.currentContentTransitionY + event.deltaY);
if (event.state === PanState.UP) {
this.currentContentTransitionY =
this.currentContentTransitionY + event.deltaY;
}
}
}
My workspace is generated using nx/xplat#^12.0.0 and my guess is that there should be some misconfiguration regarding my tsconfig or some linters that are setup by xplat app generator but I didn't change anything in those files. Any guesses?

Answer 1

The error indicates that there is a mixup between the event name and the function's expected parameter type.
If you want to use the pan event with the PanGestureEventData:
<Label
(pan)="onPanMoveContainer($event)"
></Label>
onPanMoveContainer(event: PanGestureEventData) {
}
If you want to use the touch event with the TouchGestureEventData:
<Label
(touch)="onTouchMoveContainer($event)"
></Label>
onTouchMoveContainer(event: TouchGestureEventData) {
}

Answer 2

I had to disable 'strictTemplates' option in 'compilerOptions' located in your 'tsconfig.js'