How do I disable all interactive events (click/touch/scroll) within the page in Angular2?

Question

I want to try an interaction lock in the current page that disables all interactive events like

1. Tap and Click Events
2. Pan, press and Swipe Events
3. Page Scroll

I'm thinking of a button click event which would simply set a boolean var disableTouch to true or false. I could implement an if statement in all of the functions that involve the events. However, that's a lot of work and doesn't seem to be the best approach.

updateData()
{
  if (!disableTouch) {
    // run the function
  }
}

Also, this method isn't applicable for disabling page scroll. How do I achieve this?

Answer 1

You could make a custom directive that manages all interactions to an element. Then team the directive up with a service to change whether you are able to use it.

interaction.directive.ts

import { Directive, HostListener, EventEmitter, Output} from "@angular/core";

@Directive({
    selector: "[interaction]"
})
export class CursorDirective {

    @Output() public emitInUse = new EventEmitter<boolean>();

    constructor(private interactionService: InteractionService) { }

    @HostListener("click")
    public onMouseClick() {

        if(this.interactionService.inUse) {

            this.emitInUse.emit(this.interactionService.inUse);
        }
    }
}

interaction.service.ts

import { Injectable } from "@angular/core";

@Injectable() 
export class InteractionService { 

    public inUse: boolean;

    public changeInteractionState() {

        if (this.inUse) {

            this.inUse = false;
        } else {

            this.inUse = true;
        }
    }

}