(FuseNavigation) Added support for new "isActiveMatchOptions" for Basic navigation items; https://github.com/angular/angular/pull/40303

(docs) Updated FuseNavigation documentation

src/@fuse/components/navigation/horizontal/components/basic/basic.component.html

@@ -11,7 +11,7 @@
         [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-        [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
+        [routerLinkActiveOptions]="item.isActiveMatchOptions">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>
 
@@ -39,7 +39,7 @@
         [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+        [routerLinkActiveOptions]="item.isActiveMatchOptions"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>

src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts

@@ -4,6 +4,7 @@ import { takeUntil } from 'rxjs/operators';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 
 @Component({
     selector       : 'fuse-horizontal-navigation-basic-item',
@@ -24,7 +25,8 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseUtilsService: FuseUtilsService
     )
     {
     }
@@ -38,6 +40,13 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
      */
     ngOnInit(): void
     {
+        // If the item doesn't have "isActiveMatchOptions",
+        // set it using the equivalent form of "item.exactMatch"
+        if ( !this.item.isActiveMatchOptions )
+        {
+            this.item.isActiveMatchOptions = this.item.exactMatch ? this._fuseUtilsService.exactMatchOptions : this._fuseUtilsService.subsetMatchOptions;
+        }
+
         // Get the parent navigation component
         this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
 

src/@fuse/components/navigation/navigation.types.ts

@@ -1,3 +1,5 @@
+import { IsActiveMatchOptions } from '@angular/router';
+
 export interface FuseNavigationItem
 {
     id?: string;
@@ -16,6 +18,7 @@ export interface FuseNavigationItem
     link?: string;
     externalLink?: boolean;
     exactMatch?: boolean;
+    isActiveMatchOptions?: IsActiveMatchOptions;
     function?: (item: FuseNavigationItem) => void;
     classes?: {
         title?: string;

src/@fuse/components/navigation/vertical/components/basic/basic.component.html

@@ -11,7 +11,7 @@
         [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-        [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
+        [routerLinkActiveOptions]="item.isActiveMatchOptions">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
 
@@ -39,7 +39,7 @@
         [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+        [routerLinkActiveOptions]="item.isActiveMatchOptions"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>

src/@fuse/components/navigation/vertical/components/basic/basic.component.ts

@@ -40,6 +40,13 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
      */
     ngOnInit(): void
     {
+        // If the item doesn't have "isActiveMatchOptions",
+        // set it using the equivalent form of "item.exactMatch"
+        if ( !this.item.isActiveMatchOptions )
+        {
+            this.item.isActiveMatchOptions = this.item.exactMatch ? this._fuseUtilsService.exactMatchOptions : this._fuseUtilsService.subsetMatchOptions;
+        }
+
         // Get the parent navigation component
         this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
 

src/@fuse/services/utils/utils.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
 
 @Injectable({
     providedIn: 'root'
@@ -12,6 +13,36 @@ export class FuseUtilsService
     {
     }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get the equivalent "IsActiveMatchOptions" options for "exact = true".
+     */
+    get exactMatchOptions(): IsActiveMatchOptions
+    {
+        return {
+            paths       : 'exact',
+            fragment    : 'ignored',
+            matrixParams: 'ignored',
+            queryParams : 'exact'
+        };
+    }
+
+    /**
+     * Get the equivalent "IsActiveMatchOptions" options for "exact = false".
+     */
+    get subsetMatchOptions(): IsActiveMatchOptions
+    {
+        return {
+            paths       : 'subset',
+            fragment    : 'ignored',
+            matrixParams: 'ignored',
+            queryParams : 'subset'
+        };
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------

src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html

@@ -97,6 +97,7 @@
                 link?: string;
                 externalLink?: boolean;
                 exactMatch?: boolean;
+                isActiveMatchOptions?: IsActiveMatchOptions;
                 function?: (item: FuseNavigationItem) => void;
                 classes?: {
                     title?: string;
@@ -203,7 +204,21 @@
                             <div>exactMatch</div>
                         </td>
                         <td>
-                            Sets the <em>exactMatch</em> parameter on the <em>router link active options</em>.
+                            Sets the <em>exact</em> parameter on the <em>[routerLinkActiveOptions]</em>.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>isActiveMatchOptions</div>
+                        </td>
+                        <td>
+                            Sets the <em>isActiveMatchOptions</em> object on the <em>[routerLinkActiveOptions]</em>. If provided, <em>exactMatch</em> option will be
+                            ignored.
+                            <a
+                                href="https://angular.io/api/router/IsActiveMatchOptions"
+                                target="_blank"
+                                rel="noreferrer">https://angular.io/api/router/IsActiveMatchOptions
+                            </a>
                         </td>
                     </tr>
                     <tr>