CODEWITHSUNDEEP
angularangular-ui-router
Lang
Lang

Reputation: 983

How to pass multi parameters to Angular router?

I know we can do this like:

    { path:'/entity/:id/:action', component: EntityComponent }

However, I want to do something for path like:

    { path: '/entity/:id/sub-entity/:id2', component SubEntityComponent }

Any idea how to do it?

Thanks.

-------- updated ------

how to do both: 

{ path: 'entity/:id/sub-entity/:id2', component: SubEntityComponent }

and 

{ path: 'entity/:id/sub-obj/:id2, component: SubObjComponent' }

??

Thanks

Upvotes: 0

Views: 78

Answers (3)

Gaspar
Gaspar

Reputation: 1601

const routes: Routes  = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'entity/:id/sub-entity/:id2',
        component: SubEntityComponent
    },
    {
        path: '/entity/:id/sub-entity/:id2',
        component SubEntityComponent
    }
];


// in component:

// '/entity/:id/:action'
const id; // your param
const action; // your action
this.router.navigate(['entity', id, action]);

// 'entity/:id/sub-entity/:id2'
const id; // your first param
const id2; // your second param
this.router.navigate(['entity', id, 'sub-entity', id2]);

Upvotes: 1

Abdul Rafay
Abdul Rafay

Reputation: 3391

There's just a small typo with quotes in your second path:

{ path: 'entity/:id/sub-obj/:id2', component: SubObjComponent }

You can bind RouterLink like this:

<a [routerLink]="['/entity', id, 'sub-entity', id2]">SubEntityComponent</a>
<a [routerLink]="['/entity', id, 'sub-obj', id2]">SubObjComponent</a>

Check demo HERE.

Upvotes: 1

sabrine abdelkebir
sabrine abdelkebir

Reputation: 83

in the file routes.ts

{ path: 'myUrlpath/:id1/:id2', component: componentToGoTo},

To call router 

this.router.navigate(['myUrlPath/'+"someId"+"/"+"anotherID"]);

Upvotes: -1

Related Questions