help(Gestures): What is the recommended way to include gestures into Angular Material?

[0xclx]

What are you trying to do?

I have been researching on how to enable general gestures and animations with Angular Material.
Back with AngularJS Material there were many Material-Like Controls with Animations like the Fab-Speed-Dial, and the Material-Spec and up until Angular 9 (I think) swipe-to-open Sidenavs were supported via gestures.

However this Gesture-Support was then dropped. Looking at HammerJS, which was previously used but then dropped, I am now wondering what the recommended/preferred way to include native-like/feeling controls (without using something like ionic/capacitor) would be.

Is there some recommendation for some library? Or is the general consensus "Build it yourself with Vanilla JS/Do not use gestures/animations"?

On Desktop gestures are not supported, sure, but for mobile devices, especially when packaged as a PWA, it would provide quite some "responsive" feeling and value if an Angular App worked just like a mobile app would.
(For example - Swipe Sidenav to Open/Close, Swipe Snackbar to close, ...)

What troubleshooting steps have you tried?

Reproduction

Environment

Angular CLI: 13.3.3
Node: 18.0.0 (Unsupported)
Package Manager: npm 8.6.0
OS: win32 x64

Angular:
...

Package Version

@angular-devkit/architect 0.1303.3 (cli-only)
@angular-devkit/core 13.3.3 (cli-only)
@angular-devkit/schematics 13.3.3 (cli-only)
@schematics/angular 13.3.3 (cli-only)

[Hapanmuffinssi]

This is really good question. As some gesture handling libraries such as HammerJS are kind of legacy today. We made our own swipe-directive to cover most basic situations (up/down/left/right with timing and swipe length calculations) and to provide necessary outputs to react accordingly. Maybe there is a better way, or a modern library, to handle this but so far have not found any.

RxJS has been very useful as it has nice event handling tools to compose with. fromEvent acting as a starting point.

[0xclx]

This is really good question. As some gesture handling libraries such as HammerJS are kind of legacy today. We made our own swipe-directive to cover most basic situations (up/down/left/right with timing and swipe length calculations) and to provide necessary outputs to react accordingly. Maybe there is a better way, or a modern library, to handle this but so far have not found any.

RxJS has been very useful as it has nice event handling tools to compose with. fromEvent acting as a starting point.

Could you point me to your library by any chance? I would love to see how you implemented this!

[Hapanmuffinssi]

Unfortunately I do not have permission to publish work related libraries (it's a DIY approach). But it is a small directive which is used with a HTML-element and captures touch events related to the element. I can explain how this approach works (well, it works for our needs :))

First, I found this nice solution to detect if we are dealing with a touch device (or not):
https://stackoverflow.com/a/63666289

After detection is done there is a simple RxJS handling system:

if (supportsTouch) {
    const element = el.nativeElement;
    const touchStart = fromEvent(element, 'touchstart');
    const touchEnd = fromEvent(element, 'touchend');
    zip(touchStart, touchEnd)
        .pipe(
            map(([a, b]) => ({
                start: a as TouchEvent,
                end: b as TouchEvent
            }))
        )
        .subscribe((swipe) => { work with the result here });
}

Both the touch detection and this event capturing are done in the constructor block of the directive.

el.nativeElement is the element the directive is used with. For example, an element located inside mat-sidenav as a part of the main menu. Swiping that element would then close the sidenav-container.

The idea was that every user gesture starts and ends at some point. So let's compose a package with RxJS zip. Then, when the result is available, there is swipe object with start & end as TouchEvent. Then, calculate what is necessary with the result. For example:

• Get coordinates and timestamps from swipe.start & swipe.end (the zipped and mapped subscribe result)
• Calculate what the user did based on the coordinates and how long it took (skip super long periods)
• Activate correct output event emitter (right/left/up/down) based on what the user did
• I omitted registering a subscription for the zip routine in the above code block but we do have one which is then unsubscribed with ngOnDestroy part of the directive

That is basically it. Hope it is of some help. And maybe there are better ways to deal with these...

[zarend]

AFAIK, we do not plan to bring back HammerJS or add broad support for gestures, but Feel free to file a Feature request https://github.com/angular/components/issues/new/choose.

I can also suggest posting an issue on StackOverflow using tag angular.

I'll leave this open as a P3 for now as we should address gestures in our documentation.

[0xclx]

AFAIK, we do not plan to bring back HammerJS or add broad support for gestures, but Feel free to file a Feature request https://github.com/angular/components/issues/new/choose.

I can also suggest posting an issue on StackOverflow using tag angular.

I'll leave this open as a P3 for now as we should address gestures in our documentation.

Thank you so far for this answer!
I'm curious however, is there any "official" recommendation on how to add gestures on our own? Any best practice?

[zarend]

Hi @CalaxDev , we recommend developers implement gestures however works best for their application.

To clarify: we have a few components with some kind of gestures, such as tooltip, but we do not plan on adding any more gestures.

Thanks,
Zach

[0xclx]

Hey @zarend - Thanks for the clarification.

May I just ask why Angular Material is not going to support gestures?
Considering the Material Spec talking about gestures in a rather positive light (helping users achieve tasks quickly, as intuitive controls, etc. - https://material.io/design/interaction/gestures.html) and with Angular Material otherwise following the Material Design Spec for it's components, I am not quite sure why that important aspect has actively been decided against - Especially since Angular Material is used in a lot of Mobile First Applications, at least to my knowledge.