I have the following directive:
import {Directive, HostListener, Output, EventEmitter} from '@angular/core';
@Directive({
selector: '[long-press]'
})
export class LongPressDirective {
private touchTimeout: any;
@Output() longpress = new EventEmitter();
private rootPage: any;
constructor() {}
@HostListener('touchstart') touchstart():void {
this.touchTimeout = setTimeout(() => {
this.longpress.emit({});
}, 400);
}
@HostListener('touchend') touchend():void {
this.touchEnd();
}
@HostListener('touchcancel') touchcancel():void {
this.touchEnd();
}
private touchEnd():void {
clearTimeout(this.touchTimeout);
}
}
I use this directive like this:
//<ion-item (click)="open(item)" long-press (longpress)="select(item)"></ion-item>
The problem is, I would like to pass the actual reference to the dom element. Usually with a (click) directive, I can do something like: (click)="somefunc($event)". With my directive, I want to do (longpress)="select($event, item)". I need this so that I can add an attribute to the dom. (contenteditable). How do I modify my long-press directive to pass the $event in just like I can already do with (click) out of the box?
You can inject $event into HostListener like that:
@HostListener('touchstart', ['$event']) {...}
here is the plunk: https://plnkr.co/edit/j852SpnyorLObg07qmo0
import {Component, NgModule, HostListener, Directive, EventEmitter, Output} from '@angular/core' import {BrowserModule} from '@angular/platform-browser'
@Directive({
selector: '[myDir]'
})
export class MyDir {
@Output() myDir = new EventEmitter<any>();
@HostListener('click', ['$event']) onClick($event) {
this.myDir.emit($event);
}
}
@Component({
selector: 'my-app',
template: `
<div>
<h2 (myDir)="clicked($event)">hello</h2>
</div>
`,
})
export class App {
constructor() {
}
clicked($event) {
console.log($event);
}
}
@NgModule({
imports: [BrowserModule],
declarations: [App, MyDir],
bootstrap: [App]
})
export class AppModule {
}