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?

Answer 1

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>