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

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>