Nativescript Angular reusable component not triggering (tap) function call on IOS build

Question

I have an NS-Angular app that already has an android app and everything works fine.

The issue here is with a reusable button component the angular way like:

<app-button [btnTxt]="'Sign Up'" [btnBgColor]="'#FF4715'" [btnTxtColor]="'white'" [btnType]="'pill'" [btnWidth]="'85%'" (tap)="goToSignUp()"></app-button>

The tap attribute calling the function goToSignUp is not triggering in IOS build.

Any insight on what the problem might be?

If you have a tap event emitter it should work. Can you setup a Playground sample? — Manoj, May 22 '20 at 03:41
I will try to get a similar playground to enable, can you help me any other way? Personally? — Prajil Shrestha, May 22 '20 at 04:38

score 1 · Answer 1 · answered Feb 03 '21 at 21:39

You cannot handle native events on custom components. Your component should look like this, for example

@Component({
  selector: 'app-button',
  template: '<Label text="Tap me" (tap)="handleTap($event)"></router-outlet>',
})
export class AppButtonComponent {

  // Avoid using standard names like `tap` or `onTap` for event emitters
  // I faced doubling of event several times
  tapped = new EventEmitter();
  
  handleTap(event) {
    this.tapped.emit(event);
  }
}

In this case you can use it like

<app-button (tapped)="goToSignUp()"></app-button>

Nativescript Angular reusable component not triggering (tap) function call on IOS build

1 Answers1