CODEWITHSUNDEEP
javascripthtmlangulartypescript
Tim Stackhouse
Tim Stackhouse

Reputation: 15

Using Angular (2) routerLinkActive directive for inflected routes

I've got this working, but I'm sure there's a better way to do this in Angular. Essentially I've the following:

Assume nested, inflected paths, e.g. /logos and /logo/:id

I have the following markup, which works:

    <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" links="logo" routerLink="logos">
            Logos
            <span routerLink="logo" hidden></span>
        </a>
    </li>

This will properly cause the tab to activate on /logo/:id, however that span in there feels really hacky and incorrect. If the paths are not inflected, e.g. /logo and /logo/:id or /logos and /logos/:id it works fine. Do I just add another router link? Should I add some other directive? Do I need to go custom?

Thanks!

Upvotes: 1

Views: 399

Answers (1)

Michael Fedora
Michael Fedora

Reputation: 556

As your router is setup like this; (assuming logos is after the root, i.e. /logos)

{
  path: 'logos',
  component: LogosComponent
},
{
  path: 'logo/:id',
  component: LogoComponent,
}

There's only two types of links you need to have:

Link to all the logos: <a routerLink='/logos'>All Logos</a>

Link to a single logo: <a routerLink='/logo/specific-logo'>Specific Logo</a> , where "specific-logo" is the ID of the logo you want to go to.

If you want to have /logos seem active while you are in the /logo/specific-logo directory, I don't think it's possible (except for the workaround you found). However, you can simulate it using a computed value, i.e.:

<a class="nav-link" [class.active]="logoRouteActive" links="logo" routerLink="logos">
  Logos
</a>

import { Router } from '@angular/router';

// ...

constructor(private router: Router) { /** ... */ }

get logoRouteActive(): boolean {
  return this.router.isActive('/logo', false) || this.router.isActive('/logos', false);
}

Upvotes: 1

Related Questions