routerLinkActiveOptions fragment add option to not match when no fragment is used

[mebibou]

Which @angular/* package(s) are relevant/related to the feature request?

router

Description

Consider the following example:

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

class MyComponent {
  protected routerLinkMatchOptions: IsActiveMatchOptions = {
    queryParams: 'subset',
    fragment: 'exact',
    paths: 'exact',
    matrixParams: 'ignored'
  }
}

<a routerLink="./" [routerLinkActiveOptions]="routerLinkMatchOptions" routerLinkActive="link-active"></a>
<a routerLink="./" fragment="fragment1" [routerLinkActiveOptions]="routerLinkMatchOptions" routerLinkActive="link-active"></a>

If you go on the page ./, only the first link will get the link-active class. If you go on ./#fragment1, both links will get the link-active class.

While that might be the desired effect for some, it is not necessarily always desired.

Proposed solution

Add another option to IsActiveMatchOptions.fragment, like exact-required, that would say:

• if the link has the same fragment, it is a match
• if the link has a different fragment or does not have a fragment, it is not a match

Which would differ from the current exact that behaves like:

• if the link has the same fragment or does not have a fragment, it is a match
• if the link has a different fragment it is not a match

Alternatives considered

Maybe this is a bug and the exact option should say "if there is no fragment, it is not exact, and therefore should not be a match"