Routing variable in Angular2

angular/router navigate with params
angular route data
angular redirect to route
angular/router events
router-outlet in angular
angular 7 get url parameters
angular/router query params
angular get route params

I've read over the documentation for the new Angular router. The example they have for routing to a variable is this:

Component/Module:

angular.module('myApp', ['ngFuturisticRouter'])
.controller('AppController', ['$router', function($router) {
  $router.config({ path: '/user/:id' component: 'user' });
  this.user = { name: 'Brian', id: 123 };
});

HTML/Template:

<div ng-controller="AppController as app">
  <a router-link="user({id: app.user.id})">{{app.user.name}}</a>
</div>

Here is my component:

@RouteConfig([
  { path: '/', component: Home, as: 'home' },
  { path: '/displays/:id', component: DisplayDetails, as: 'display-details' }
])

And my HTML/Template:

<div class="col-md-3" *ng-for="#display of displays">
    <a [router-link]="['/display-details({id: display.id})']"><display-card ></display-card></a>
</div>

I've also tried instead of putting the component alias (display-details) I've tried putting the actual path and the component it self but they all give me the same error:

EXCEPTION: Component "App" has no route named "display-details({id: display.id})". in [null]

As suggested by @ThreeAccents

Quoting from the documentation RouterLink.

RouterLink expects the value to be an array of route names, followed by the params for that level of routing. For instance ['/Team', {teamId: 1}, 'User', {userId: 2}] means that we want to generate a link for the Team route with params {teamId: 1}, and with a child route User with params {userId: 2}.

So the solution is to change your routerLink to as follows :

<div class="col-md-3" *ng-for="#display of displays">
    <a [routerLink]="['/display-details', {id: display.id}]">
       <display-card ></display-card>
    </a>
</div>

Glad it worked for you :)

Using Route Parameters, Declaring Route Parameters. The route for the component that displays the details for a specific product would need a route parameter for the ID of that product. The app doesn't have any variable states or navigation. There is one URL, and that URL always displays the "My Store" page with a list of products and their descriptions. This guide shows you how to use Angular routing to give the user in-app navigation. In a single-page app, instead of loading new pages, you show different components and data


That syntax works in my case:

<div class="col-md-3" *ng-for="#display of displays">
    <a [routerLink]="['/display-details', display.id]">
       <display-card ></display-card>
    </a>
</div>

with this router config:

@RouteConfig([
  { path: '/', component: Home, as: 'home' },
  { path: '/display-details/:id', component: DisplayDetails }
])

In-app navigation with routing, Note: The preceding example uses a variable, name , and assigns it the value based on the name parameter. Setting up wildcard routeslink. A well-functioning​  The reason that the params property on ActivatedRoute is an Observable is that the router may not recreate the component when navigating to the same component. In this case the parameter may change without the component being recreated. View Basic Example. View Example with Programmatic Route Navigation. View examples running in full screen


For the path: '/user/:id'

We can use in two way like /user;id:1234 or /user/123

// For /user;id:1234
[routerLink]="['/user', {id: display.id}]"
// For /user/1234
[routerLink]="['/user', display.id]"

I came here for my issue with path: '/customers/:id/detail' and finally finished with:

[routerLink]="['/customers', cust.id, 'detail']"

Parameterised Routes • Angular, Get the value of the parameter named id and assign it to the class variable productID, which is used in template via binding. NOTE: In the above  Angular2 conditional routing. Ask Question Angular 2+ One route handled by two components by condition. 0. Variable Type confusion between Double and Int


You can use a function in your component to get the dynamic URL and params by using routerLink and queryParams directive.

<div class="col-md-3" *ng-for="#display of displays">
    <a [routerLink]="getURL(display)" 
       [queryParams]="getParams(display)>
       <display-card ></display-card>
    </a>
</div>

in component:

getURL(display) { 
    return ['/displays', display.id];
}

getParams(display) { 
    return { param: display.somethingElse }; 
}

Angular 2: Passing Data to Routes, Angular 2 – Router links, click handlers, routing parameters The base URL was also moved to a class level variable so that it could be shared  You can use a global variable in routing configuration. The routing generator would be a function that build the routing array based on that/those global variables. – Leonardo Neninger Aug 16 '17 at 21:48


Angular 2 – Router links, click handlers, routing parameters – Eric L , Setup a home route and a fallback route, learn why order matters; Router navigation using routerLink; Master-Detail with Child Routes - how do  Learn how to pass parameters or data to the Route using the RouterLink Directive in Angular. We look at how to define the route, which accepts the parameter. Learn how to retrieve the parameters using the ActivatedRoute Service.either by snapshot method or by subscribe method


Angular Router Fundamentals: Child & Auxiliary Routes, Master Detail, Text version of the video http://csharp-video-tutorials.blogspot.com/2017/08/​angular-2-route Duration: 23:10 Posted: Aug 16, 2017 The browser is a familiar model of application navigation: Enter a URL in the address bar and the browser navigates to a corresponding page. Click links on the page and the browser navigates to a new page. Click the browser's back and forward buttons and the browser navigates backward and forward


Angular 2 route parameters, The Angular router makes it a simple process to work with route parameters. In this scenario, we have a variable called username in the  I have different states in my routing module.In angular 1.5 I was using a custom variable “accessValues” to check whether the user has access to a particular state.I wan to do something similar to this in angular 2 .How is it possible?How to pass “accessValues” to my states and check the value while state change.