From e1dd3b10dd57db12fa95fac85f9700a1fbc15156 Mon Sep 17 00:00:00 2001
From: Shuaib Hasan Akib <akibh805@gmail.com>
Date: Fri, 5 Sep 2025 01:11:54 +0600
Subject: [PATCH] docs: uses signal, implement TODOs, and fix typos (#63603)

PR Close #63603
---
 .../src/app/features/update/update.component.html |  8 ++++----
 .../src/app/features/update/update.component.scss |  2 +-
 adev/src/app/features/update/update.component.ts  | 15 +++++++++------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/adev/src/app/features/update/update.component.html b/adev/src/app/features/update/update.component.html
index 58407b65acc..331255b1ec7 100644
--- a/adev/src/app/features/update/update.component.html
+++ b/adev/src/app/features/update/update.component.html
@@ -140,11 +140,11 @@
     beforeRecommendations.length > 0 || duringRecommendations.length > 0 || afterRecommendations.length > 0
   ) {
     <div class="recommendations">
-      <h2>{{title}}</h2>
+      <h2>{{title()}}</h2>
 
       <h3>Before you update</h3>
       @for (r  of beforeRecommendations; track $index) {
-        <div class="adev-recommentation-item">
+        <div class="adev-recommendation-item">
           <mat-checkbox />
           <div [innerHTML]="r.renderedStep"></div>
         </div>
@@ -163,7 +163,7 @@
       }
 
       @for (r of duringRecommendations; track $index) {
-        <div class="adev-recommentation-item">
+        <div class="adev-recommendation-item">
           <mat-checkbox />
           <div [innerHTML]="r.renderedStep"></div>
         </div>
@@ -176,7 +176,7 @@
 
       <h3>After you update</h3>
       @for (r of afterRecommendations; track $index) {
-        <div class="adev-recommentation-item">
+        <div class="adev-recommendation-item">
           <mat-checkbox />
           <div [innerHTML]="r.renderedStep"></div>
         </div>
diff --git a/adev/src/app/features/update/update.component.scss b/adev/src/app/features/update/update.component.scss
index 22320fe9d0d..b532938957e 100644
--- a/adev/src/app/features/update/update.component.scss
+++ b/adev/src/app/features/update/update.component.scss
@@ -124,7 +124,7 @@ h4 {
   }
 }
 
-.adev-recommentation-item {
+.adev-recommendation-item {
   display: flex;
   align-items: center;
 
diff --git a/adev/src/app/features/update/update.component.ts b/adev/src/app/features/update/update.component.ts
index 3dc8bc3e8be..859823f9469 100644
--- a/adev/src/app/features/update/update.component.ts
+++ b/adev/src/app/features/update/update.component.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, HostListener, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, HostListener, inject, signal} from '@angular/core';
 import {Step, RECOMMENDATIONS} from './recommendations';
 import {Clipboard} from '@angular/cdk/clipboard';
 import {CdkMenuModule} from '@angular/cdk/menu';
@@ -18,6 +18,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {IconComponent} from '@angular/docs';
 import {ActivatedRoute, Router} from '@angular/router';
 import {marked} from 'marked';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 interface Option {
   id: keyof Step;
@@ -40,8 +41,10 @@ interface Option {
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export default class AppComponent {
-  protected title = '';
+export default class UpdateComponent {
+  private readonly snackBar = inject(MatSnackBar);
+
+  protected title = signal('');
 
   protected level = 1;
   protected options: Record<string, boolean> = {
@@ -128,8 +131,8 @@ export default class AppComponent {
   @HostListener('click', ['$event.target'])
   copyCode({tagName, textContent}: Element) {
     if (tagName === 'CODE') {
-      // TODO: add a toast notification
       this.clipboard.copy(textContent!);
+      this.snackBar.open('Copied to clipboard', '', {duration: 2000});
     }
   }
 
@@ -149,9 +152,9 @@ export default class AppComponent {
     const labelMedium = 'medium applications';
     const labelAdvanced = 'advanced applications';
 
-    this.title = `${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) {