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>
Reactions are currently unavailable
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>