refactor(docs-infra): use routed component input binding instead of ActivatedRoute

Replaces direct `ActivatedRoute` usage with routed component input binding for query params and resolved route data. Keeps `ActivatedRoute` only where it is still needed for relative navigation.

Author: MeAkib

adev/src/app/features/home/home.component.html

@@ -13,7 +13,7 @@ <h1 tabindex="-1">Angular v22 is here!</h1>
         </div>
       </div>
 
-      @if (!isUwu) {
+      @if (!uwu()) {
         <div class="title">
           <h2>Productivity<br />Meets scalability</h2>
           <h3>The framework for building scalable web apps with confidence</h3>

adev/src/app/features/home/home.component.ts

@@ -8,9 +8,18 @@
 
 import {Tab, TabContent, TabList, TabPanel, Tabs} from '@angular/aria/tabs';
 import {A11yModule} from '@angular/cdk/a11y';
-import {afterRenderEffect, Component, ElementRef, inject, signal, viewChild} from '@angular/core';
+import {
+  afterRenderEffect,
+  booleanAttribute,
+  Component,
+  ElementRef,
+  inject,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
 import {IconComponent, IS_SEARCH_DIALOG_OPEN, TextField} from '@angular/docs';
-import {ActivatedRoute, RouterLink} from '@angular/router';
+import {RouterLink} from '@angular/router';
 import {ControlFlowExample} from './components/control-flow/control-flow-example';
 import {DeferrableViewsExample} from './components/deferrable-views-example/deferrable-views-example';
 import {HydrationExample} from './components/hydration-example/hydration-example';
@@ -44,8 +53,8 @@ const FEATURE_TAB = {
   styleUrls: ['./home.component.scss'],
 })
 export default class Home {
-  private readonly activatedRoute = inject(ActivatedRoute);
-  protected readonly isUwu = 'uwu' in this.activatedRoute.snapshot.queryParams;
+  /** Bound from the `?uwu` query param, which has an empty string value when present. */
+  readonly uwu = input(false, {transform: booleanAttribute});
 
   protected readonly displaySearchDialog = inject(IS_SEARCH_DIALOG_OPEN);
 

adev/src/app/features/tutorial/tutorial.component.spec.ts

@@ -29,7 +29,7 @@ class FakeEmbeddedEditor {}
   template: '<div>FakeDocsViewer</div>',
 })
 class FakeDocViewer {
-  documentFilePath = input<string | undefined>();
+  docContent = input<string | undefined>();
 }
 
 // TODO: export this class, it's a helpful mock we could you on other tests.
@@ -123,10 +123,51 @@ describe('Tutorial', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should set the tutorial data from the route data inputs', async () => {
+    const parent = {
+      path: 'tutorials/first-app',
+      label: 'First App',
+      tutorialData: {type: TutorialType.LOCAL, title: 'First App', restrictedMode: false},
+    };
+    fixture.componentRef.setInput('path', 'tutorials/first-app/steps/01-hello-world');
+    fixture.componentRef.setInput('label', 'Hello world');
+    fixture.componentRef.setInput('parent', parent);
+    fixture.componentRef.setInput('tutorialData', {
+      type: TutorialType.LOCAL,
+      title: 'Hello world',
+      sourceCodeZipPath: 'assets/tutorials/01-hello-world.zip',
+      nextStep: 'tutorials/first-app/steps/02-home',
+      restrictedMode: false,
+    });
+    fixture.componentRef.setInput('docContent', {id: 'hello-world', contents: '<p>Hello</p>'});
+    await fixture.whenStable();
+
+    expect(component.documentContent()).toBe('<p>Hello</p>');
+    expect(component.tutorialName()).toBe('First App');
+    expect(component.stepName()).toBe('Hello world');
+    expect(component.localTutorialZipUrl()).toBe('assets/tutorials/01-hello-world.zip');
+    expect(component.nextStepPath).toBe('/tutorials/first-app/steps/02-home');
+    expect(component.shouldRenderEmbeddedEditor()).toBeFalse();
+
+    // Navigating to another step reuses the component and only updates the inputs.
+    fixture.componentRef.setInput('path', 'tutorials/first-app/steps/02-home');
+    fixture.componentRef.setInput('label', 'Home');
+    fixture.componentRef.setInput('tutorialData', {
+      type: TutorialType.LOCAL,
+      title: 'Home',
+      previousStep: 'tutorials/first-app/steps/01-hello-world',
+      restrictedMode: false,
+    });
+    await fixture.whenStable();
+
+    expect(component.stepName()).toBe('Home');
+    expect(component.previousStepPath).toBe('/tutorials/first-app/steps/01-hello-world');
+    expect(component.nextStepPath).toBeUndefined();
+  });
+
   // TODO: Add tests in a future PR
   // it('should render the embedded editor based on the tutorial config', () => {});
   // it('should not render the embedded editor based on the tutorial config', () => {});
-  // it('should load the tutorial', () => {});
 
   it('should reset the reveal answer', async () => {
     setupResetRevealAnswerValues();

adev/src/app/features/tutorial/tutorial.component.ts

@@ -12,13 +12,16 @@ import {
   Component,
   computed,
   DestroyRef,
+  effect,
   ElementRef,
   EnvironmentInjector,
   inject,
+  input,
   PLATFORM_ID,
   Signal,
   signal,
   Type,
+  untracked,
   viewChild,
 } from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
@@ -32,9 +35,8 @@ import {
   TutorialNavigationItem,
   TutorialType,
 } from '@angular/docs';
-import {ActivatedRoute, RouterLink} from '@angular/router';
+import {RouterLink} from '@angular/router';
 import {from} from 'rxjs';
-import {filter} from 'rxjs/operators';
 
 import {PAGE_PREFIX} from '../../core/constants/pages';
 import {
@@ -74,11 +76,17 @@ export default class Tutorial {
   private readonly elementRef = inject(ElementRef<unknown>);
   private readonly embeddedTutorialManager = inject(EmbeddedTutorialManager);
   private readonly nodeRuntimeState = inject(NodeRuntimeState);
-  private readonly route = inject(ActivatedRoute);
   private readonly splitResizerHandler = inject(SplitResizerHandler);
   private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
-  readonly documentContent = signal<string | null>(null);
+  // Bound from the route data (the tutorial navigation item and its resolved content).
+  readonly docContent = input<DocContent>();
+  readonly tutorialData = input<TutorialNavigationData>();
+  readonly path = input<string>();
+  readonly label = input<string>();
+  readonly parent = input<TutorialNavigationItem>();
+
+  readonly documentContent = computed(() => this.docContent()?.contents ?? null);
   readonly localTutorialZipUrl = signal<string | undefined>(undefined);
 
   readonly nextTutorialPath = signal<string | null>(null);
@@ -101,18 +109,16 @@ export default class Tutorial {
   readonly answerRevealed = signal<boolean>(false);
 
   constructor() {
-    this.route.data
-      .pipe(
-        filter(() =>
-          Boolean(this.route?.routeConfig?.path?.startsWith(`${PAGE_PREFIX.TUTORIALS}/`)),
-        ),
-        takeUntilDestroyed(),
-      )
-      .subscribe((data) => {
-        const docContent = (data['docContent'] as DocContent | undefined)?.contents ?? null;
-        this.documentContent.set(docContent);
-        this.setTutorialData(data as TutorialNavigationItem);
-      });
+    effect(() => {
+      const tutorialData = this.tutorialData();
+      const path = this.path();
+      const label = this.label();
+      const parent = this.parent();
+      if (!tutorialData || !path || !label) {
+        return;
+      }
+      untracked(() => this.setTutorialData({path, label, parent, tutorialData}));
+    });
 
     const destroyRef = inject(DestroyRef);
     afterNextRender(() => {

adev/src/app/features/update/update.component.html

@@ -11,15 +11,15 @@ <h3>Angular versions</h3>
           From v.
 
           <button type="button" [cdkMenuTriggerFor]="templatesMenuFrom">
-            <span>{{ from.name }}</span>
+            <span>{{ from().name }}</span>
             <docs-icon>expand_more</docs-icon>
           </button>
 
           <ng-template #templatesMenuFrom>
             <ul class="adev-template-dropdown" cdkMenu>
               @for (version of versions; track $index) {
                 <li>
-                  <button cdkMenuItem type="button" (click)="from = version; showUpdatePath()">
+                  <button cdkMenuItem type="button" (click)="from.set(version); showUpdatePath()">
                     <span>{{ version.name }}</span>
                   </button>
                 </li>
@@ -32,15 +32,15 @@ <h3>Angular versions</h3>
           <span class="adev-template-select">
             To v.
             <button type="button" [cdkMenuTriggerFor]="templatesMenuTo">
-              <span>{{ to.name }}</span>
+              <span>{{ to().name }}</span>
               <docs-icon>expand_more</docs-icon>
             </button>
 
             <ng-template #templatesMenuTo>
               <ul class="adev-template-dropdown" cdkMenu>
                 @for (version of versions; track $index) {
                   <li>
-                    <button cdkMenuItem type="button" (click)="to = version; showUpdatePath()">
+                    <button cdkMenuItem type="button" (click)="to.set(version); showUpdatePath()">
                       <span>{{ version.name }}</span>
                     </button>
                   </li>
@@ -51,7 +51,7 @@ <h3>Angular versions</h3>
         </span>
       </div>
 
-      @if (from.number >= futureVersion || to.number >= futureVersion) {
+      @if (from().number >= futureVersion || to().number >= futureVersion) {
         <div class="docs-alert docs-alert-critical">
           <p>
             <strong>Warning:</strong>
@@ -61,7 +61,7 @@ <h3>Angular versions</h3>
         </div>
       }
 
-      @if (from.number > to.number) {
+      @if (from().number > to().number) {
         <div class="docs-alert docs-alert-critical">
           <p>
             <strong>Warning:</strong>
@@ -70,7 +70,7 @@ <h3>Angular versions</h3>
         </div>
       }
 
-      @if (to.number - from.number > 150 && from.number > 240) {
+      @if (to().number - from().number > 150 && from().number > 240) {
         <div class="docs-alert docs-alert-critical">
           <p>
             <strong>Warning:</strong>
@@ -84,19 +84,19 @@ <h3>Angular versions</h3>
 
       <h3>Application complexity</h3>
       <mat-button-toggle-group
-        (change)="level = $event.value; showUpdatePath()"
-        [value]="level"
+        (change)="level.set($event.value); showUpdatePath()"
+        [value]="level()"
         style="margin-bottom: 16px"
       >
         <mat-button-toggle [value]="1">Basic</mat-button-toggle>
         <mat-button-toggle [value]="2">Medium</mat-button-toggle>
         <mat-button-toggle [value]="3">Advanced</mat-button-toggle>
       </mat-button-toggle-group>
-      @if (level === 1) {
+      @if (level() === 1) {
         <p>Shows information for all Angular developers.</p>
-      } @else if (level === 2) {
+      } @else if (level() === 2) {
         <p>Shows information that's of interest to more advanced Angular developers.</p>
-      } @else if (level === 3) {
+      } @else if (level() === 3) {
         <p>Shows all the information we have about this update.</p>
       }
 
@@ -111,7 +111,7 @@ <h3>Other dependencies</h3>
         </div>
       }
 
-      @if (from.number < 600) {
+      @if (from().number < 600) {
         <h4>Package Manager</h4>
         <mat-button-toggle-group
           (change)="packageManager = $event.value; showUpdatePath()"

adev/src/app/features/update/update.component.spec.ts

@@ -33,6 +33,18 @@ describe('UpdateComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should read the versions and level from the query param inputs', async () => {
+    const queryParamFixture = TestBed.createComponent(UpdateComponent);
+    queryParamFixture.componentRef.setInput('v', '20.0-21.0');
+    queryParamFixture.componentRef.setInput('l', '3');
+    await queryParamFixture.whenStable();
+
+    const queryParamComponent = queryParamFixture.componentInstance;
+    expect(queryParamComponent['from']().name).toBe('20.0');
+    expect(queryParamComponent['to']().name).toBe('21.0');
+    expect(queryParamComponent['level']()).toBe(3);
+  });
+
   describe('getComplexityLevelName', () => {
     it('should return "Basic" for ApplicationComplexity.Basic', () => {
       expect(component['getComplexityLevelName'](ApplicationComplexity.Basic)).toBe('Basic');