Navigating through Label tap


#1

Hey, I have a list of items that I have Stacked Vertically. I am trying to navigate to a different page on each tap of the Label element within the StackLayout but the Label element has no tap event. How do I achieve this.
My sample code looks something like this

then

onCar1Tap(){
this._routerExtensions.navigate(["/car1List"],
{
animated: true,
transition: {
name: “slide”,
duration: 200,
curve: “ease”
}
})
}


#2

Labels do have tap event, if it fails please share an example where we can reproduce the issue.


#3
<GridLayout class="page">
  <ScrollView shadow="2" elevation="2">
      <StackLayout>
          <Label text="Car1" (tap)="onCar1Tap()"></Label>
          <Label text="Car2" (tap)="oncCar2Tap()"></Label>
          <Label text="Car3" (tap)="onCar3Tap()"></Label>
          <Label text="Car4" (tap)="onCar4Tap()"></Label>
          <Label text="Car5" (tap)="onCar5Tap()"></Label>
          <Label text="Car6" (tap)="onCar6Tap()"></Label>
          <Label text="Car7" (tap)="OnCar7Tap()"></Label>
          <Label text="Car8" (tap)="onCar8Tap()"></Label>
          <Label text="Car9" (tap)="onCar9Tap()"></Label>
          <Label text="Car10" (tap)="onCar10Tap()"></Label>  
          <Label text="Others" (tap)="onOthersTap()"></Label>  
      </StackLayout> 
  </ScrollView>
</GridLayout>

then 

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";

@Component({
    selector: "Categories",
    moduleId: module.id,
    templateUrl: "./categories.component.html"
})
export class CategoriesComponent implements OnInit {

    constructor(private _routerExtensions: RouterExtensions,
    ) {
    }

    ngOnInit(): void {
    }


    onCar1Tap(){
        this._routerExtensions.navigate(["/car1List"],
            {
                animated: true,
                transition: {
                    name: "slide",
                    duration: 200,
                    curve: "ease"
                }
            })
    }
}


#4

It should work if your router has path declared, can you try simply logging something to make sure you hit the function?


#5

I have imported all related components within my routing.module and declared all routes/paths but still it don’t seem to work


#6

Here is an working example to demonstrate label tap.

If you are still not able to figure out the issue with your code, create the playground example where we can reproduce your issue.


#7

Hey, here is the link to the sample code. I would appretiate your help.


#8

As I already mentioned it must be with your routes being not properly declared, it’s throws proper error message on tap.

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'play'

play is declared under home which is lazily loaded, therefore the route should be,

this._routerExtensions.navigate(["/home", "play"],
            {
                animated: true,
                transition: {
                    name: "slide",
                    duration: 200,
                    curve: "ease"
                }
            });

#9

Thanks a lot, that worked.