@@ -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>
 
@@ -13,7 +13,7 @@ <h1 tabindex="-1">Angular v22がリリースされました！</h1>
         </div>
       </div>
 
-      @if (!isUwu) {
+      @if (!uwu()) {
         <div class="title">
           <h2>Productivity<br />Meets scalability</h2>
           <h3>スケーラブルなWebアプリを確信を持って構築できるフレームワーク</h3>
 
@@ -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()"
@@ -159,8 +159,7 @@ <h3>Before you update</h3>
             </span>
           </div>
         </div>
-      }
-      @if (beforeRecommendations.length <= 0) {
+      } @empty {
         <div>
           <em>You don't need to do anything before moving between these versions.</em>
         </div>
@@ -187,8 +186,7 @@ <h3>Update to the new version</h3>
             </span>
           </div>
         </div>
-      }
-      @if (duringRecommendations.length <= 0) {
+      } @empty {
         <div>
           <em>There aren't any recommendations for moving between these versions.</em>
         </div>
@@ -209,8 +207,7 @@ <h3>After you update</h3>
             </span>
           </div>
         </div>
-      }
-      @if (afterRecommendations.length <= 0) {
+      } @empty {
         <div>
           <em>You don't need to do anything after moving between these versions.</em>
         </div>
 
@@ -8,7 +8,7 @@
 
 import {Clipboard} from '@angular/cdk/clipboard';
 import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu';
-import {Component, inject, signal} from '@angular/core';
+import {afterNextRender, Component, inject, input, linkedSignal, signal} from '@angular/core';
 import {IconComponent} from '@angular/docs';
 import {MatButtonToggle, MatButtonToggleGroup} from '@angular/material/button-toggle';
 import {MatCheckbox} from '@angular/material/checkbox';
@@ -39,6 +39,10 @@ interface Option {
 
 const isWindows = typeof window !== 'undefined' && window.navigator.userAgent.includes('Windows');
 
+/** Versions selected when the URL doesn't specify any. */
+const DEFAULT_FROM_VERSION = '21.0';
+const DEFAULT_TO_VERSION = '22.0';
+
 @Component({
   selector: 'adev-update-guide',
   templateUrl: './update.component.html',
@@ -61,7 +65,8 @@ export default class UpdateComponent {
 
   protected title = signal('');
 
-  protected level = 1;
+  /** The application complexity level, initialized from the `l` query param. */
+  protected readonly level = linkedSignal(() => parseInt(this.levelParam() ?? '', 10) || 1);
   protected options: Record<string, boolean> = {
     ngUpgrade: false,
     material: false,
@@ -120,8 +125,17 @@ export default class UpdateComponent {
     {name: '2.1', number: 201},
     {name: '2.0', number: 200},
   ];
-  protected from = this.versions.find((version) => version.name === '21.0')!;
-  protected to = this.versions.find((version) => version.name === '22.0')!;
+  /** The versions to update from and to, initialized from the `v` query param. */
+  protected readonly from = linkedSignal(
+    () =>
+      this.findVersion(this.versionsParam()?.split('-')[0]) ??
+      this.findVersion(DEFAULT_FROM_VERSION)!,
+  );
+  protected readonly to = linkedSignal(
+    () =>
+      this.findVersion(this.versionsParam()?.split('-')[1]) ??
+      this.findVersion(DEFAULT_TO_VERSION)!,
+  );
   protected futureVersion = 2300;
 
   protected readonly steps: Step[] = RECOMMENDATIONS;
@@ -130,19 +144,22 @@ export default class UpdateComponent {
   private readonly router = inject(Router);
   private readonly activatedRoute = inject(ActivatedRoute);
 
+  /** Bound from the `v` query param, in the `<from>-<to>` format (e.g. `21.0-22.0`). */
+  readonly versionsParam = input<string>(undefined, {alias: 'v'});
+  /** Bound from the `l` query param, the application complexity level. */
+  readonly levelParam = input<string>(undefined, {alias: 'l'});
+
   constructor() {
-    const queryMap = this.activatedRoute.snapshot.queryParamMap;
-    // Detect settings in URL
-    this.level = parseInt(queryMap.get('l')!, 10) || this.level;
-
-    // Detect versions of from and to
-    const versions = queryMap.get('v');
-    if (versions) {
-      const [from, to] = versions.split('-');
-      this.from = this.versions.find((version) => version.name === from)!;
-      this.to = this.versions.find((version) => version.name === to)!;
-      this.showUpdatePath();
-    }
+    // Show the update path right away when the versions are provided in the URL.
+    afterNextRender(() => {
+      if (this.versionsParam()) {
+        this.showUpdatePath();
+      }
+    });
+  }
+
+  private findVersion(name: string | undefined) {
+    return this.versions.find((version) => version.name === name);
   }
 
   copyCode(event: Event) {
@@ -172,7 +189,7 @@ export default class UpdateComponent {
     this.afterRecommendations = [];
 
     // Refuse to generate recommendations for downgrades
-    if (this.to.number < this.from.number) {
+    if (this.to().number < this.from().number) {
       alert('We do not support downgrading versions of Angular.');
       return;
     }
@@ -182,13 +199,13 @@ export default class UpdateComponent {
     const labelMedium = 'medium applications';
     const labelAdvanced = 'advanced applications';
 
-    this.title.set(`${labelTitle} v${this.from.name} -> v${this.to.name}
+    this.title.set(`${labelTitle} v${this.from().name} -> v${this.to().name}
     for
-    ${this.level < 2 ? labelBasic : this.level < 3 ? labelMedium : labelAdvanced}`);
+    ${this.level() < 2 ? labelBasic : this.level() < 3 ? labelMedium : labelAdvanced}`);
 
     // Find applicable steps and organize them into before, during, and after upgrade
     for (const step of this.steps) {
-      if (step.level <= this.level && step.necessaryAsOf > this.from.number) {
+      if (step.level <= this.level() && step.necessaryAsOf > this.from().number) {
         // Check Options
         // Only show steps that don't have a required option
         // Or when the user has a matching option selected
@@ -213,12 +230,12 @@ export default class UpdateComponent {
         step.renderedStep = await marked(this.replaceVariables(step.action));
 
         // If you could do it before now, but didn't have to finish it before now
-        if (step.possibleIn <= this.from.number && step.necessaryAsOf >= this.from.number) {
+        if (step.possibleIn <= this.from().number && step.necessaryAsOf >= this.from().number) {
           this.beforeRecommendations.push(step);
           // If you couldn't do it before now, and you must do it now
-        } else if (step.possibleIn > this.from.number && step.necessaryAsOf <= this.to.number) {
+        } else if (step.possibleIn > this.from().number && step.necessaryAsOf <= this.to().number) {
           this.duringRecommendations.push(step);
-        } else if (step.possibleIn <= this.to.number) {
+        } else if (step.possibleIn <= this.to().number) {
           this.afterRecommendations.push(step);
         }
       }
@@ -227,7 +244,7 @@ export default class UpdateComponent {
     // Update the URL so users can link to this transition
     this.router.navigate([], {
       relativeTo: this.activatedRoute,
-      queryParams: {v: `${this.from.name}-${this.to.name}`, l: this.level},
+      queryParams: {v: `${this.from().name}-${this.to().name}`, l: this.level()},
       queryParamsHandling: 'merge',
     });
 
@@ -257,8 +274,8 @@ export default class UpdateComponent {
 
   private async renderPreV6Instructions(): Promise<void> {
     let upgradeStep: Step;
-    const additionalDeps = this.getAdditionalDependencies(this.to.number);
-    const angularVersion = this.getAngularVersion(this.to.number);
+    const additionalDeps = this.getAdditionalDependencies(this.to().number);
+    const angularVersion = this.getAngularVersion(this.to().number);
     const angularPackages = [
       'animations',
       'common',
@@ -274,7 +291,7 @@ export default class UpdateComponent {
     ];
 
     // Provide npm/yarn instructions for versions before 6
-    if (this.to.number < 600) {
+    if (this.to().number < 600) {
       const actionMessage = `Update all of your dependencies to the latest Angular and the right version of TypeScript.`;
 
       if (isWindows) {
@@ -305,7 +322,7 @@ export default class UpdateComponent {
 
       // Npm installs typescript wrong in v5, let's manually specify
       // https://github.com/npm/npm/issues/16813
-      if (this.packageManager === 'npm install' && this.to.number === 500) {
+      if (this.packageManager === 'npm install' && this.to().number === 500) {
         upgradeStep.action += `
 
 \`npm install typescript@2.4.2 --save-exact\``;