HammerJS in Angular 9 pinchin pinchout text is not selectable

Question

Hi guys so I've noticed that when using (pinchin) or (pinchout) events in a component the text inside of it is no longer selectable. I see this issue has already been corrected in hammerjs github page https://github.com/hammerjs/hammer.js/issues/81 a long time ago. So basically what they say is to use Gesture Options https://github.com/hammerjs/hammer.js/wiki/Getting-Started#gesture-options and specifically an option called userselect that by default is set to none.

The problem is that hammerjs documentation is all for older versions of angular and I don't know how to define this options in newer versions specifically angular 9.

Here is my HTML, as you can see I'm displaying a pdf inside it, with a selectable textlayer, this is the layer where I want to be able to select text.

<div class="col-xs-12 pdf-viewer-container" (pinchin)="zoomOut()" (pinchout)="zoomIn()">
      <div (swiperight)="previousPage()"></div>
      <pdf-viewer *ngIf="!!pdfData"
                  [src]="pdfData" (after-load-complete)="setNumberOfPages($event)"
                  [render-text]="true" [page]="currentPage" [show-all]="false"
                  [render-text-mode]="2" [zoom]="zoom" [original-size]="false"
                  [autoresize]="true" [stick-to-page]="false">
      </pdf-viewer>
      <div (swipeleft)="nextPage()"></div>
    </div>

Of course without using pinchin and pinchout the text selection works fine. I need this functionality to be able to use gestures in mobile devices.

---

I found this answer should do this delete Hammer.defaults.cssProps.userSelect; however I don't see anyway I can do this in angular 9 because I don't use Hammer object in my component, I'm just using directives.

Answer 1

The only thing needed to do is to modify element css selector called user-select and set it to value = all or text depending on what you need.

Here is my css class for my viewer:

 pdf-viewer {
            flex: 18 1 90%;
            margin: 30px auto;
            display: block;
            overflow: auto;
            max-width: 90%;
            user-select: text !important;
   }