@HostListener with touch event in directive is preventing the tap event in component (Only in iOS)

[NickIliev]

From @umeshrs on June 24, 2017 13:4

Hi,

I am trying to write a directive to change colour of a button on "Touchup" and "TouchDown". But when I attach this directive the (tap) event in the component is not getting called. This happens only in iOS. Is there any workarounds for this. Below is my directive and component.

import { Directive, HostBinding, HostListener, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[btnTch]'
})
export class btnTchDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) { }

    @HostListener('touch', ['$event'])
    toggleColor(event){
        if(event.action == "down"){
            this.renderer.addClass(this.el.nativeElement, 'pressed');
            // this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', "blue");
        }else{
            this.renderer.removeClass(this.el.nativeElement, 'pressed');
        }
    }

}

<ActionBar title="Login" actionBarHidden="false"></ActionBar>
<GridLayout columns="*" rows="auto, *, 130" width="100%" height="100%" class="login_bg">
    <GridLayout columns="*" rows="*" verticalAlignment="center" horizontalAlignment="center">
        <Label text="" style="border-radius:62; width:125; height:125; padding:0;margin-top:100; margin-bottom:10; background-color:white;opacity:0.1"></Label>
        <Label text="" style="border-radius:50; width:100; height:100; padding:0;margin-top:100; margin-bottom:10; background-color:white;opacity:0.1"></Label>
       
    </GridLayout>
    <StackLayout col="0" row="1" verticalAlignment="center" style="width:80%">
        <Label text="Enter Mobile Number"></Label>
        <TextField hint="Enter Mobile Number" [(ngModel)]="userNum" style="border-bottom-width:1; border-style:solid; border-color: red; padding:5 0"></TextField>
        <Label *ngIf="!genErrs == '' || null || undefined" text="{{genErrs}}"></Label>
    </StackLayout>
    <StackLayout col="0" row="2">
        <Button text="SIGN IN" btnTch (tap)="Auth_for_OTP()"></Button>
        <Label marginTop="15" horizontalAlignment="center" text="REQUEST FOR ACCESS" [nsRouterLink]="['/signup']" ></Label>
    </StackLayout>
</GridLayout>

Copied from original issue: NativeScript/NativeScript#4449

[umeshswamy]

One more observation - The Tap event is not prevented when the same directive it applied to a label instead.

[olivermuc]

Not sure why this is closed, as the problem still exists.
For instance, I would like to attache a (tap) function to an element, but also would like it to show when pressed.