hammer.js doesn't detect swipe

Question

Hammer.js doesn't detect swipe when I use "touch-action: pan-x !important;" on that id, it works when I don't use touch action but then scroll is not working on my site.

I'm sorry if the code looks messed up:

                <ul id="sportCourtsRow">
                <div style="margin-left: 32vw;">
                    {% for c in courtsB %}
                        <li>
                            <label>
                                <input type="radio" name="sportCourts" class="sportCourts"><div class="sportsCourtsTxt">{{c}}</div>
                            </label>
                        </li>
                    {% endfor %}
                </div>
            </ul>

<p id="abc></p>

var hammertime = new Hammer(document.getElementById("sportCourtsRow"));
        hammertime.get('swipe').set({ threshold: 10 });
        
        hammertime.on('swipe', function(ev) {
            document.getElementById("abc").innerHTML = "works!" //check if swipe works.
        });

      #sportCourtsRow
  {
    position: fixed;
    margin-top: 28vh;
    height: 6vh;
    width: 100vw;
    background-color: #dfdddd;
    border-bottom: 1px solid black;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
    
  }

  .sportsCourtsTxt
  {
    font-family: 'alef';
    font-size: 2.5vh;
    margin-top: 1vh;
    margin-right: 100vw;
    text-align: center;
  }

Answer 1

do you import 'HammerModule' in your app.module.ts?

import { HammerModule } from '@angular/platform-browser';

@NgModule({
  imports: [
    HammerModule
  ]
)}

and don't forget to import hammerjs in your main.ts file (I forgot it too):

import { AppModule } from './app/app.module';
import 'hammerjs';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
    enter code here

I had the same issue and these make it work (thanks to https://stackoverflow.com/a/60336283/7431000)