I have the following Angular 2 component:
import { Component, ElementRef, Renderer } from '@angular/core';;
@Component({
selector: 'my-button',
templateUrl: 'button.html'
})
export class ButtonComponent {
private text: string;
constructor(
private elementRef: ElementRef,
private renderer: Renderer
) {
this.text = 'test';
}
touchmove(event) {
console.log(this)
}
}
{{button}}
<my-button (touchmove)="touchmove()">
this.renderer.listen(this.elementRef.nativeElement, 'touchmove', this.touchmove);
touchmove
this
this.renderer.listen(this.elementRef.nativeElement, 'touchmove', this.touchmove.bind(this))
event
(touchmove)="touchmove()"
<div (touchmove)="touchmove()">{{text}}</div>
my-button
If you use arrow function then this
will work
this.renderer.listen(this.elementRef.nativeElement, 'touchmove', (e) => this.touchmove(e));