CODEWITHSUNDEEP
javascriptangularnativescriptangular2-nativescript
shaedrich
shaedrich

Reputation: 5735

conditional set angular/nativescript nsRouterLink

Is it possible to set a nsRouterLink only when a specific condition is true?

Let's assume, I have a list view and each item gets its own nsRouterLink to a detail page. But some items in the list do not have the id needed for the detail, so they should simply not be clickable while the others should.

I know that I could just use an onClick binding and handle it on my own, but is that possible with nsRouterLink automatically, too?

For example:

<StackLayout *ngFor="let item of items">
    <StackLayout [nsRouterLink]="['/path/' + item.id]">
        <!-- Content goes here -->
    </StackLayout>
</StackLayout>

Upvotes: 0

Views: 767

Answers (4)

mast3rd3mon
mast3rd3mon

Reputation: 8835

Use the isEnabled property, that will disable the button if the user isn't allowed to go to the next page

<Button [isEnabled]="<value to check>" text="<Text>" [nsRouterLink]="['/<link>']"></Button>

Upvotes: 0

kivind
kivind

Reputation: 1

I have not used nsRouterLink much. But what occurs when you leave the link in null or undefined?

If you really handle the link on a click event, then conditionally listening to the event should be done on the code side, that mean the component.

Another option is to have 2 different components shown.

  • if detail → show nsRouterLink
  • if no detail → show label.

Something like that can work also.

Upvotes: 0

Juliano Vargas
Juliano Vargas

Reputation: 323

Adding false or null gives error something like:

ERROR Error: NG04008: The requested path contains null segment at index 0

AND

ERROR Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: 'home/false'

Error: NG04002: Cannot match any routes. URL Segment: 'home/false'` what really worked for without any error:

<StackLayout *ngFor="let item of items">
    <StackLayout [nsRouterLink]="item.id ? ['/path/' + item.id] : []">
        <!-- Content goes here -->
    </StackLayout>
</StackLayout>

Upvotes: 0

shaedrich
shaedrich

Reputation: 5735

What is with this solution I saw several times:

<StackLayout *ngFor="let item of items">
    <StackLayout [nsRouterLink]="[item?.id ? '/path/' + item.id : false]">
        <!-- Content goes here -->
    </StackLayout>
</StackLayout>

Upvotes: 2

Related Questions