Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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?
                The TouchGestureEventData is for the touch event, not pan. if you update your HTML with (touch)="onTouchMoveContainer($event)", it should let you use the TouchGestureEventData.
– William Juan
                May 25, 2022 at 10:58
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) {
                Thanks for your response. Yes the datatypes of events in the html and my backcode (component.ts) file are the same and both correspond to PanGestureEventData that's the function name which is onTouch which doesn't matter(as it's shown in my code that I've posted in the question).
– ClassY
                May 27, 2022 at 11:35
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.