CODEWITHSUNDEEP
nativescriptangular2-nativescript
Ace Zhang
Ace Zhang

Reputation: 91

Nativescript: How to create Angular routerlink-like behavior

Right now I have this component, it is a search function component:

App Search Result

Here is the code for it:

<StackLayout>
    <StackLayout class="form">
        <StackLayout class="input-field">
            <TextField hint="Tournament Name" [(ngModel)]="query"></TextField>
        </StackLayout>
        <Button text="Search" (tap)="onSubmit()"></Button>
    </StackLayout>
    <Scrollview height="80%">
        <StackLayout>
            <GridLayout *ngFor="let result of results" (tap)="onTap(result.tournament_id)" columns="*, *" rows="auto, auto, auto, auto, auto, auto" borderWidth="1px">
                <Label  [text]="result.name" row="0" col="0" colspan="2" ></Label>
                <Label  [text]="result.organization" row="1" col="0" colspan="2" ></Label>
                <Label  [text]="result.date" row="2" col="0" ></Label>
                <Label  [text]="result.time" row="2" col="1" ></Label>
                <Label  [text]="result.game" row="3" col="0" colspan="2" ></Label>
                <Label  [text]="result.style" row="4" col="0" colspan="2" ></Label>
                <Label  [text]="result.location" row="5" col="0" colspan="2" textWrap="true"></Label>
            </GridLayout>
        </StackLayout>
    </Scrollview>
</StackLayout>

Clicking on one of the tournament descriptions should bring up a tournament profile page like so:

Tournament Page on Web

Right now I have an onTap wired to the boxes as such here:

  onTap(id){
    console.log("tapped", id);
    this.routerExtensions.navigate(["/tournaments","profile", id]).then(nav => {
              console.log(nav); // true if navigation is successful
              }, err => {
              console.log(err) // when there's an error
              });

  }

When I click a box it prints out: 

tapped {id} //first click
true
tapped {id} //subsequent clicks
null

How do I create Angular web routerlink like behavior in a nativescript app where clicking on an object brings up another component?

Upvotes: 0

Views: 357

Answers (1)

Manoj
Manoj

Reputation: 21908

You should use nsRouterLink as discussed in the Angular Navigation docs.

Upvotes: 1

Related Questions