0

I have a below route defined in my angular 12 app, I am able to navigate to it directly using the browser URL bar. Now I am trying to navigate using hyperlink, like below

<a routerLink="home/1057/view/(sidebar:view)">sidebar</a> <!-- Doesn't work -->

or

<a routerLink="/home/1057/view/(sidebar:view)">sidebar</a> <!-- Doesn't work -->

http://localhost/home/1057/view(sidebar:view) - works fine when you directly hit the url, but above routerLink is not working, any ideas ?

{
   path: 'view',
   outlet: 'sidebar', // right
   loadChildren: () => import('src/app/entities/sidebar/sidebar.module').then(m => m.SideBarModule)
}
ajayramesh
  • 3,576
  • 8
  • 50
  • 75
  • 2
    You have `sidebard` instead of `sidebar` as the name of the router outlet. Is that intentional? – D M Oct 21 '21 at 14:29
  • @DM - its corrected now, still the issue is same – ajayramesh Oct 21 '21 at 14:34
  • well, try using routLink with binding ... ( see more https://angular-training-guide.rangle.io/routing/aux-routes ) ... – Vovan_Super Oct 21 '21 at 14:42
  • @Vovan_Super - Suppose I have A, B, C components, and I am calling `A/B/C` like above, from component A and router outlet is defined in B for C. Looks like what I am trying is not possible right ? – ajayramesh Oct 21 '21 at 18:11

3 Answers3

1

Try like this

<a [routerLink]="['url path']">

CMS Develop
  • 72
  • 7
0

Use the below code

[routerLink]="['home/1057/view/sidebar:view']"
Kushal Bajje
  • 121
  • 1
  • 8
  • its not working, so I tried with brackets, like this `[routerLink]="['home/1057/view/(sidebar:view)']"` but its not working since its not considering the brackets – ajayramesh Oct 21 '21 at 18:09
0

Below Snipped solved the problem.

<a routerLinkActive="active" 
  [routerLink]="['home/1057/view', 
{ outlets: { 'sidebar': ['view'] } }]" >{{ name }}</a>
ajayramesh
  • 3,576
  • 8
  • 50
  • 75