chore: update origin to fa546f382d (Angular v22)

.node-version

@@ -1 +1 @@
-22.12.0
+22.22.2

adev-ja/src/app/core/services/a-dev-title-strategy.en.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable, inject} from '@angular/core';
+import {inject, Service} from '@angular/core';
 import {NavigationItem} from '@angular/docs';
 import {Meta, Title} from '@angular/platform-browser';
 import {ActivatedRouteSnapshot, RouterStateSnapshot, TitleStrategy} from '@angular/router';
@@ -22,7 +22,7 @@ export const TITLE_TWITTER_META_TAG = 'twitter:title';
 
 export const ALL_TITLE_META_TAGS = [TITLE_OG_META_TAG, TITLE_TWITTER_META_TAG];
 
-@Injectable({providedIn: 'root'})
+@Service()
 export class ADevTitleStrategy extends TitleStrategy {
   private readonly title = inject(Title);
   private readonly meta = inject(Meta);

adev-ja/src/app/core/services/a-dev-title-strategy.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable, inject} from '@angular/core';
+import {inject, Service} from '@angular/core';
 import {NavigationItem} from '@angular/docs';
 import {Meta, Title} from '@angular/platform-browser';
 import {ActivatedRouteSnapshot, RouterStateSnapshot, TitleStrategy} from '@angular/router';
@@ -22,7 +22,7 @@ export const TITLE_TWITTER_META_TAG = 'twitter:title';
 
 export const ALL_TITLE_META_TAGS = [TITLE_OG_META_TAG, TITLE_TWITTER_META_TAG];
 
-@Injectable({providedIn: 'root'})
+@Service()
 export class ADevTitleStrategy extends TitleStrategy {
   private readonly title = inject(Title);
   private readonly meta = inject(Meta);

adev-ja/src/app/features/home/home.component.en.html

@@ -3,9 +3,9 @@
     <div class="pattern"></div>
     <div class="content">
       <div class="adev-banner-container">
-        <a href="events/v21" class="adev-banner" target="_blank">
-          <h1 tabindex="-1">Angular v21 is here!</h1>
-          <p class="adev-banner-cta">🕹️ Start your adventure</p>
+        <a href="events/v22" class="adev-banner" target="_blank">
+          <h1 tabindex="-1">Angular v22 is here!</h1>
+          <p class="adev-banner-cta">⚡ Explore what's new</p>
         </a>
 
         <div class="search-field">
@@ -36,49 +36,49 @@ <h3>The framework for building scalable web apps with confidence</h3>
     </div>
   </section>
 
-  <section class="features-section">
+  <section class="features-section" #featuresSection>
     <h2 id="features">Features that actually <br />help you solve problems</h2>
 
     <div ngTabs class="material-tabs">
-      <div ngTabList selectionMode="follow" selectedTab="signals">
+      <div ngTabList selectionMode="follow" [(selectedTab)]="selectedFeatureTab">
         <div class="tab-background"></div>
-        <div ngTab value="signals">Signals</div>
-        <div ngTab value="control-flow">Control Flow</div>
-        <div ngTab value="deferrable-views">Deferrable Views</div>
-        <div ngTab value="hydration">Hydration</div>
+        <div ngTab [value]="FEATURE_TAB.signals">Signals</div>
+        <div ngTab [value]="FEATURE_TAB.controlFlow">Control Flow</div>
+        <div ngTab [value]="FEATURE_TAB.deferrableViews">Deferrable Views</div>
+        <div ngTab [value]="FEATURE_TAB.hydration">Hydration</div>
       </div>
 
       <div class="sliding-window">
-        <div ngTabPanel [preserveContent]="true" value="signals">
-          <ng-template ngTabContent>
-            @defer (on idle) {
+        <div ngTabPanel [preserveContent]="true" [value]="FEATURE_TAB.signals">
+          @defer (on idle) {
+            <ng-template ngTabContent>
               <adev-signals-demo />
-            }
-          </ng-template>
+            </ng-template>
+          }
         </div>
 
-        <div ngTabPanel [preserveContent]="true" value="control-flow">
-          <ng-template ngTabContent>
-            @defer (on idle) {
+        <div ngTabPanel [preserveContent]="true" [value]="FEATURE_TAB.controlFlow">
+          @defer (on idle) {
+            <ng-template ngTabContent>
               <adev-control-flow-example />
-            }
-          </ng-template>
+            </ng-template>
+          }
         </div>
 
-        <div ngTabPanel [preserveContent]="true" value="deferrable-views">
-          <ng-template ngTabContent>
-            @defer {
+        <div ngTabPanel [preserveContent]="true" [value]="FEATURE_TAB.deferrableViews">
+          @defer (on idle) {
+            <ng-template ngTabContent>
               <adev-defer-example />
-            }
-          </ng-template>
+            </ng-template>
+          }
         </div>
 
-        <div ngTabPanel [preserveContent]="true" value="hydration">
-          <ng-template ngTabContent>
-            @defer {
+        <div ngTabPanel [preserveContent]="true" [value]="FEATURE_TAB.hydration">
+          @defer (on idle) {
+            <ng-template ngTabContent>
               <adev-hydration-example />
-            }
-          </ng-template>
+            </ng-template>
+          }
         </div>
       </div>
     </div>

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

@@ -3,9 +3,9 @@
     <div class="pattern"></div>
     <div class="content">
       <div class="adev-banner-container">
-        <a href="events/v21" class="adev-banner" target="_blank">
-          <h1 tabindex="-1">Angular v21がリリースされました！</h1>
-          <p class="adev-banner-cta">🕹️ 冒険を始めよう</p>
+        <a href="events/v22" class="adev-banner" target="_blank">
+          <h1 tabindex="-1">Angular v22がリリースされました！</h1>
+          <p class="adev-banner-cta">⚡ 新機能を見る</p>
         </a>
 
         <div class="search-field">
@@ -36,49 +36,49 @@ <h3>スケーラブルなWebアプリを確信を持って構築できるフレ
     </div>
   </section>
 
-  <section class="features-section">
+  <section class="features-section" #featuresSection>
     <h2 id="features">あなたの問題解決を助ける<br />多くの機能</h2>
 
     <div ngTabs class="material-tabs">
-      <div ngTabList selectionMode="follow" selectedTab="signals">
+      <div ngTabList selectionMode="follow" [(selectedTab)]="selectedFeatureTab">
         <div class="tab-background"></div>
-        <div ngTab value="signals">シグナル</div>
-        <div ngTab value="control-flow">制御フロー</div>
-        <div ngTab value="deferrable-views">遅延可能ビュー</div>
-        <div ngTab value="hydration">ハイドレーション</div>
+        <div ngTab [value]="FEATURE_TAB.signals">シグナル</div>
+        <div ngTab [value]="FEATURE_TAB.controlFlow">制御フロー</div>
+        <div ngTab [value]="FEATURE_TAB.deferrableViews">遅延可能ビュー</div>
+        <div ngTab [value]="FEATURE_TAB.hydration">ハイドレーション</div>
       </div>
 
       <div class="sliding-window">
-        <div ngTabPanel [preserveContent]="true" value="signals">
-          <ng-template ngTabContent>
-            @defer (on idle) {
+        <div ngTabPanel [preserveContent]="true" [value]="FEATURE_TAB.signals">
+          @defer (on idle) {
+            <ng-template ngTabContent>
               <adev-signals-demo />
-            }
-          </ng-template>
+            </ng-template>
+          }
         </div>
 
-        <div ngTabPanel [preserveContent]="true" value="control-flow">
-          <ng-template ngTabContent>
-            @defer (on idle) {
+        <div ngTabPanel [preserveContent]="true" [value]="FEATURE_TAB.controlFlow">
+          @defer (on idle) {
+            <ng-template ngTabContent>
               <adev-control-flow-example />
-            }
-          </ng-template>
+            </ng-template>
+          }
         </div>
 
-        <div ngTabPanel [preserveContent]="true" value="deferrable-views">
-          <ng-template ngTabContent>
-            @defer {
+        <div ngTabPanel [preserveContent]="true" [value]="FEATURE_TAB.deferrableViews">
+          @defer (on idle) {
+            <ng-template ngTabContent>
               <adev-defer-example />
-            }
-          </ng-template>
+            </ng-template>
+          }
         </div>
 
-        <div ngTabPanel [preserveContent]="true" value="hydration">
-          <ng-template ngTabContent>
-            @defer {
+        <div ngTabPanel [preserveContent]="true" [value]="FEATURE_TAB.hydration">
+          @defer (on idle) {
+            <ng-template ngTabContent>
               <adev-hydration-example />
-            }
-          </ng-template>
+            </ng-template>
+          }
         </div>
       </div>
     </div>