docs: update examples to use isActive instead of deprecated Router.isActive (angular#66430)

PR Close angular#66430

Author: SkyZeroZx

adev/src/content/guide/routing/read-route-state.md

@@ -323,3 +323,30 @@ The RouterLinkActive directive can also be applied to an ancestor element in ord
 ```
 
 For more information, check out the [API docs for RouterLinkActive](/api/router/RouterLinkActive).
+
+## Check if a URL is active
+
+The `isActive` function returns a computed signal that tracks whether a given URL is currently active in the router. The signal automatically updates as the router state changes.
+
+```angular-ts
+import {Component, inject} from '@angular/core';
+import {isActive, Router} from '@angular/router';
+
+@Component({
+  template: `
+    <div [class.active]="isSettingsActive()">
+      <h2>Settings</h2>
+    </div>
+  `
+})
+export class Panel {
+  private router = inject(Router);
+
+  isSettingsActive = isActive('/settings', this.router, {
+    paths: 'subset',
+    queryParams: 'ignored',
+    fragment: 'ignored',
+    matrixParams: 'ignored'
+  });
+}
+```

adev/src/content/guide/routing/route-transition-animations.md

@@ -122,7 +122,7 @@ Use this callback to customize transition behavior based on navigation context.
 
 ```ts
 import {inject} from '@angular/core';
-import {Router, withViewTransitions} from '@angular/router';
+import {Router, withViewTransitions, isActive} from '@angular/router';
 
 withViewTransitions({
   onViewTransitionCreated: ({transition}) => {
@@ -137,7 +137,9 @@ withViewTransitions({
       queryParams: 'ignored',
     };
 
-    if (router.isActive(targetUrl, config)) {
+    const isTargetRouteCurrent = isActive(targetUrl, router, config);
+
+    if (isTargetRouteCurrent()) {
       transition.skipTransition();
     }
   },

packages/router/src/directives/router_link_active.ts

@@ -125,9 +125,9 @@ export class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit
   /**
    * Options to configure how to determine if the router link is active.
    *
-   * These options are passed to the `Router.isActive()` function.
+   * These options are passed to the `isActive()` function.
    *
-   * @see {@link Router#isActive}
+   * @see {@link isActive}
    */
   @Input() routerLinkActiveOptions: {exact: boolean} | IsActiveMatchOptions = {exact: false};
 

packages/router/src/router.ts

@@ -70,7 +70,7 @@ import {afterNextNavigation} from './utils/navigations';
 import {RouterState} from './router_state';
 
 /**
- * The equivalent `IsActiveMatchOptions` options for `Router.isActive` is called with `true`
+ * The equivalent `IsActiveMatchOptions` options for `isActive` is called with `true`
  * (exact = true).
  */
 export const exactMatchOptions: IsActiveMatchOptions = {
@@ -81,7 +81,7 @@ export const exactMatchOptions: IsActiveMatchOptions = {
 };
 
 /**
- * The equivalent `IsActiveMatchOptions` options for `Router.isActive` is called with `false`
+ * The equivalent `IsActiveMatchOptions` options for `isActive` is called with `false`
  * (exact = false).
  */
 export const subsetMatchOptions: IsActiveMatchOptions = {

packages/router/src/url_tree.ts

@@ -18,7 +18,7 @@ import type {Router} from './router';
  * for the current router state.
  *
  * @publicApi
- * @see {@link Router#isActive}
+ * @see {@link isActive}
  */
 export interface IsActiveMatchOptions {
   /**
@@ -84,6 +84,8 @@ const paramCompareMap: Record<ParamMatchOptions, ParamCompareFn> = {
  * 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.
+ *
+ * @see [Check if a URL is active](guide/routing/read-route-state#check-if-a-url-is-active)
  * @publicApi 21.1
  */
 export function isActive(