feat(router): Add standalone function to create a comptued for isActive

atscott · kirjs · commit e44839b01640 · 2026-01-07T09:23:06.000-05:00
This change deprecates `Router.isActive` in favor of a function that
creates a computed which tracks whether a given url/UrlTree is active,
following changes in the router state.

`Router.isActive` contributes ~1333b to the bundle size, but is only
used by developers who use the API directly or who use
`RouterLinkActive`. It should not contribute to bundle sizes of
applications that do not use this functionality.
diff --git a/goldens/public-api/router/index.api.md b/goldens/public-api/router/index.api.md
@@ -369,6 +369,9 @@ export interface InMemoryScrollingOptions {
     scrollPositionRestoration?: 'disabled' | 'enabled' | 'top';
 }
 
+// @public
+export function isActive(url: string | UrlTree, router: Router, matchOptions: IsActiveMatchOptions): Signal<boolean>;
+
 // @public
 export interface IsActiveMatchOptions {
     fragment: 'exact' | 'ignored';
@@ -722,6 +725,7 @@ export class Router {
     initialNavigation(): void;
     // @deprecated
     isActive(url: string | UrlTree, exact: boolean): boolean;
+    // @deprecated
     isActive(url: string | UrlTree, matchOptions: IsActiveMatchOptions): boolean;
     get lastSuccessfulNavigation(): Signal<Navigation | null>;
     navigate(commands: readonly any[], extras?: NavigationExtras): Promise<boolean>;
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -41,6 +41,8 @@
       "COMPLETE_NOTIFICATION",
       "COMPONENT_REGEX",
       "COMPONENT_VARIABLE",
+      "COMPUTED_NODE",
+      "COMPUTING",
       "CONTAINER_HEADER_OFFSET",
       "CONTENT_ATTR",
       "CONTEXT",
@@ -96,6 +98,7 @@
       "ENABLE_ROOT_COMPONENT_BOOTSTRAP",
       "ENVIRONMENT",
       "ENVIRONMENT_INITIALIZER",
+      "ERRORED",
       "EVENT_MANAGER_PLUGINS",
       "EffectRefImpl",
       "EffectScheduler",
@@ -306,6 +309,7 @@
       "TracingService",
       "Tree",
       "TreeNode",
+      "UNSET",
       "USE_VALUE",
       "UnsubscriptionError",
       "UrlHandlingStrategy",
@@ -452,6 +456,7 @@
       "compare",
       "computeNavigation",
       "computeStaticStyling",
+      "computed",
       "concat",
       "concatAll",
       "concatMap",
@@ -480,6 +485,7 @@
       "createAndRenderEmbeddedLView",
       "createChildrenForEmptyPaths",
       "createComponentLView",
+      "createComputed",
       "createContainerRef",
       "createContentQuery",
       "createDirectivesInstances",
@@ -779,6 +785,7 @@
       "interpolation1",
       "invokeDirectivesHostBindings",
       "invokeHostBindingsInCreationMode",
+      "isActive",
       "isActiveMatchOptions",
       "isAngularZoneProperty",
       "isAnimationEventType",
diff --git a/packages/router/src/directives/router_link_active.ts b/packages/router/src/directives/router_link_active.ts
@@ -21,13 +21,14 @@ import {
   QueryList,
   Renderer2,
   SimpleChanges,
+  untracked,
 } from '@angular/core';
 import {from, of, Subscription} from 'rxjs';
 import {mergeAll} from 'rxjs/operators';
 
 import {Event, NavigationEnd} from '../events';
-import {Router} from '../router';
-import {IsActiveMatchOptions} from '../url_tree';
+import {exactMatchOptions, Router, subsetMatchOptions} from '../router';
+import {isActive, IsActiveMatchOptions} from '../url_tree';
 
 import {RouterLink} from './router_link';
 
@@ -246,15 +247,16 @@ export class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit
   }
 
   private isLinkActive(router: Router): (link: RouterLink) => boolean {
-    const options: boolean | IsActiveMatchOptions = isActiveMatchOptions(
-      this.routerLinkActiveOptions,
-    )
+    const options: IsActiveMatchOptions = isActiveMatchOptions(this.routerLinkActiveOptions)
       ? this.routerLinkActiveOptions
       : // While the types should disallow `undefined` here, it's possible without strict inputs
-        this.routerLinkActiveOptions.exact || false;
+        (this.routerLinkActiveOptions.exact ?? false)
+        ? {...exactMatchOptions}
+        : {...subsetMatchOptions};
+
     return (link: RouterLink) => {
       const urlTree = link.urlTree;
-      return urlTree ? router.isActive(urlTree, options) : false;
+      return urlTree ? untracked(isActive(urlTree, router, options)) : false;
     };
   }
 
diff --git a/packages/router/src/index.ts b/packages/router/src/index.ts
@@ -137,6 +137,7 @@ export {
   UrlSegmentGroup,
   UrlSerializer,
   UrlTree,
+  isActive,
 } from './url_tree';
 export {
   mapToCanActivate,
diff --git a/packages/router/src/router.ts b/packages/router/src/router.ts
@@ -629,10 +629,16 @@ export class Router {
   isActive(url: string | UrlTree, exact: boolean): boolean;
   /**
    * Returns whether the url is activated.
+   * @deprecated 21.1 - Use the `isActive` function instead.
+   * @see {@link isActive}
    */
   isActive(url: string | UrlTree, matchOptions: IsActiveMatchOptions): boolean;
   /** @internal */
   isActive(url: string | UrlTree, matchOptions: boolean | IsActiveMatchOptions): boolean;
+  /**
+   * @deprecated 21.1 - Use the `isActive` function instead.
+   * @see {@link isActive}
+   */
   isActive(url: string | UrlTree, matchOptions: boolean | IsActiveMatchOptions): boolean {
     let options: IsActiveMatchOptions;
     if (matchOptions === true) {
diff --git a/packages/router/src/url_tree.ts b/packages/router/src/url_tree.ts
@@ -6,11 +6,12 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable, ɵRuntimeError as RuntimeError} from '@angular/core';
+import {computed, Injectable, ɵRuntimeError as RuntimeError, Signal} from '@angular/core';
 
 import {RuntimeErrorCode} from './errors';
 import {convertToParamMap, ParamMap, Params, PRIMARY_OUTLET} from './shared';
 import {equalArraysOrString, shallowEqual} from './utils/collection';
+import type {Router} from './router';
 
 /**
  * A set of options which specify how to determine if a `UrlTree` is active, given the `UrlTree`
@@ -79,6 +80,27 @@ const paramCompareMap: Record<ParamMatchOptions, ParamCompareFn> = {
   'ignored': () => true,
 };
 
+/**
+ * Returns a computed signal of whether the given url is activated in the Router.
+ *
+ * As the router state changes, the signal will update to reflect whether the url is active.
+ * @publicApi 21.1
+ */
+export function isActive(
+  url: string | UrlTree,
+  router: Router,
+  matchOptions: IsActiveMatchOptions,
+): Signal<boolean> {
+  const urlTree = url instanceof UrlTree ? url : router.parseUrl(url);
+  return computed(() =>
+    containsTree(
+      router.lastSuccessfulNavigation()?.finalUrl ?? new UrlTree(),
+      urlTree,
+      matchOptions,
+    ),
+  );
+}
+
 export function containsTree(
   container: UrlTree,
   containee: UrlTree,
