feat(@schematics/angular): use signal in app component

cexbrayat · dgp1130 · commit 1c19e0dcd4a8 · 2025-06-06T09:39:20.000-07:00
This updates the generated `App` component to use a signal for the `title` field.
diff --git a/packages/schematics/angular/application/files/common-files/src/app/app.html.template b/packages/schematics/angular/application/files/common-files/src/app/app.html.template
@@ -225,7 +225,7 @@
           <clipPath id="a"><path fill="#fff" d="M0 0h982v239H0z" /></clipPath>
         </defs>
       </svg>
-      <h1>Hello, {{ title }}</h1>
+      <h1>Hello, {{ title() }}</h1>
       <p>Congratulations! Your app is running. 🎉</p>
     </div>
     <div class="divider" role="separator" aria-label="Divider"></div>
diff --git a/packages/schematics/angular/application/files/module-files/src/app/app.ts.template b/packages/schematics/angular/application/files/module-files/src/app/app.ts.template
@@ -1,9 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
   template: `
-    <h1>Welcome to {{title}}!</h1>
+    <h1>Welcome to {{ title() }}!</h1>
 
     <% if (routing) {
      %><router-outlet /><%
@@ -15,5 +15,5 @@ import { Component } from '@angular/core';
   styleUrl: './app.<%= style %>'<% } %>
 })
 export class App {
-  protected title = '<%= name %>';
+  protected readonly title = signal('<%= name %>');
 }
diff --git a/packages/schematics/angular/application/files/standalone-files/src/app/app.ts.template b/packages/schematics/angular/application/files/standalone-files/src/app/app.ts.template
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';<% if(routing) { %>
+import { Component, signal } from '@angular/core';<% if(routing) { %>
 import { RouterOutlet } from '@angular/router';<% } %>
 
 @Component({
   selector: '<%= selector %>',
   imports: [<% if(routing) { %>RouterOutlet<% } %>],<% if(inlineTemplate) { %>
   template: `
-    <h1>Welcome to {{title}}!</h1>
+    <h1>Welcome to {{ title() }}!</h1>
 
     <% if (routing) {
      %><router-outlet /><%
@@ -16,5 +16,5 @@ import { RouterOutlet } from '@angular/router';<% } %>
   styleUrl: './app.<%= style %>'<% } %>
 })
 export class App {
-  protected title = '<%= name %>';
+  protected readonly title = signal('<%= name %>');
 }
diff --git a/tests/legacy-cli/e2e/tests/build/prerender/error-with-sourcemaps.ts b/tests/legacy-cli/e2e/tests/build/prerender/error-with-sourcemaps.ts
@@ -20,7 +20,7 @@ export default async function () {
 
   await writeMultipleFiles({
     'src/app/app.ts': `
-      import { Component } from '@angular/core';
+      import { Component, signal } from '@angular/core';
       import { CommonModule } from '@angular/common';
       import { RouterOutlet } from '@angular/router';
 
@@ -32,7 +32,7 @@ export default async function () {
         styleUrls: ['./app.css']
       })
       export class App {
-      title = 'test-ssr';
+      protected readonly title = signal('test-ssr');
 
       constructor() {
         console.log(window)
diff --git a/tests/legacy-cli/e2e/tests/build/server-rendering/server-routes-output-mode-server.ts b/tests/legacy-cli/e2e/tests/build/server-rendering/server-routes-output-mode-server.ts
@@ -21,10 +21,10 @@ export default async function () {
   await installWorkspacePackages();
 
   // Test scenario to verify that the content length, including \r\n, is accurate
-  await replaceInFile('src/app/app.ts', "title = '", "title = 'Title\\r\\n");
+  await replaceInFile('src/app/app.ts', "title = signal('", "title = signal('Title\\r\\n");
 
   // Ensure text has been updated.
-  assert.match(await readFile('src/app/app.ts'), /title = 'Title/);
+  assert.match(await readFile('src/app/app.ts'), /title = signal\('Title/);
 
   // Add routes
   await writeFile(
diff --git a/tests/legacy-cli/e2e/tests/misc/forwardref-es2015.ts b/tests/legacy-cli/e2e/tests/misc/forwardref-es2015.ts
@@ -6,8 +6,8 @@ export default async function () {
   // Update the application to use a forward reference
   await replaceInFile(
     'src/app/app.ts',
-    "import { Component } from '@angular/core';",
-    "import { Component, Inject, Injectable, forwardRef } from '@angular/core';",
+    "import { Component, signal } from '@angular/core';",
+    "import { Component, Inject, Injectable, forwardRef, signal } from '@angular/core';",
   );
   await appendToFile('src/app/app.ts', '\n@Injectable() export class Lock { }\n');
   await replaceInFile(
