@HostListener not working in Nativescript?


#1

Hi,
I made a directive for Angular which I would like to use with Nativescript, but unfortunately I cannot manage to listen for the host ‘tap’ events:

@HostListener('tap')
onTap() {
  console.log('tap');
}

To be able to run the directive on Nativescript you’ll have to remove the DOM dependencies commenting out the following:

ngAfterViewInit() {
  //this.container = this.el.nativeElement.querySelector(':only-child');
}

Here you can find an example on how to use the directive:



Because of the console.log inside of the HostListener every time that the user taps on the host element you should get a console log, but nothing happens. It works flawlessly in the web. Doesn’t Nativescript support host listeners?


#2

I found the issue: labels don’t have tap events so there is nothing to bubble up to the host.
The solution was to simply apply the directive on the StackLayout instead: https://play.nativescript.org/?template=play-ng&id=ZHp6oZ&v=15


#3

I was not completely right about StackLayout

The following works flawlessly:

While if I put the very same Label inside its own component it doesn’t work anymore:

Using StackLayout inside the Item component doesn’t help either.

But applying the directive to StackLayout itself does indeed work:

With all of the previous solutions you’ll loose the ripple effect. I still didn’t find any way to listed for both tap and longPress events without loosing the ripple effect. It seems to be a well known bug: