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

This updates the generated `App` component to use a signal for the `title` field.

Author: cexbrayat

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>

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 %>');
 }

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 %>');
 }

tests/legacy-cli/e2e/assets/17.0-project/src/app/app.component.spec.ts

@@ -14,12 +14,6 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have the 'seventeen-project' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('seventeen-project');
-  });
-
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();