How to multiple URLs on same router link

Question

I'm working on a little test project in angular and I want to include a side navigation using angular router outlet. I want there to be two links:

<a class="nav-link text-white" [routerLink]='["/link/to/one"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 1</a>
<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 2</a>

There are a few sub pages that can be navigated to from one of the components. But they don't need to show up as a router link.

So the structure of my site can be for example:

|-Comopnent 1
|
|-Component 2
   |- Component 3 
   |- Component 4 

So I want the user to be able to navigate to Component2 via the router links. From this component the user can be redirected via code to component 3 and 4. But I dont want them to have extra router links, I want that there is still component2 highlighted in the navigation menu.

In my app.module.ts I declared the routes pretty basically:

RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full'},
  { path: '/link/to/one', component: Component1 },
  { path: '/another/link/to/component', component: Component2 },
])

How can I call Component3 & 4 from Component2, and let the router highlight Component2 in the navigation bar?

Regards

Answer 1

You can do that by simply setting Component3 and Component4 to show on Child Routes.

So your Router Config will be something like:

[
  { path: 'one', component: OneComponent },
  { path: 'two', component: TwoComponent, children: [
      { path: 'three', component: ThreeComponent },
      { path: 'four', component: FourComponent },
    ] 
  },
]

And then the routerLinkActive will take care of the rest.

In the active CSS Class, I've set the color to red. So whichever link is active, it will get the red color.

You can also test it out by manually typing /two/three or /two/four in the address bar.

---

Here's a Working Sample StackBlitz for your ref.

Answer 2

TL; DR

Configure your Component 3 and Component 4 route as children of Component2, and then remove your [routerLinkActiveOptions]="{ exact: true }" from your routerlink linked to Component2.

Description

I think you already know the answer, the key is routerLinkActiveOptions.

First, configure your route like this:

RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full'},
  { path: '/link/to/one', component: Component1 },
  { path: '/another/link/to/component', component: Component2, children: [
      { path: '/component3', component: Component3 },
      { path: '/component4', component: Component4 },
    ],
  },
])

Then, change your routerLinkActiveOptions

Before:

<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 2</a

After:

<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: false }">Component 2</a

The difference is [routerLinkActiveOptions]="{ exact: false }".

However, the default value of routerLinkActiveOptions.exact is false, so it is same with just removing the routerLinkActiveOptions.

<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink">Component 2</a