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

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

Author: cexbrayat

packages/schematics/angular/application/files/module-files/src/app/app.component.spec.ts.template

@@ -25,7 +25,7 @@ describe('AppComponent', () => {
   it(`should have as title '<%= name %>'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('<%= name %>');
+    expect(app.title()).toEqual('<%= name %>');
   });
 
   it('should render title', () => {

packages/schematics/angular/application/files/module-files/src/app/app.component.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.component.<%= style %>'<% } %>
 })
 export class AppComponent {
-  title = '<%= name %>';
+  title = signal('<%= name %>');
 }

packages/schematics/angular/application/files/standalone-files/src/app/app.component.spec.ts.template

@@ -19,7 +19,7 @@ describe('AppComponent', () => {
   it(`should have the '<%= name %>' title`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('<%= name %>');
+    expect(app.title()).toEqual('<%= name %>');
   });
 
   it('should render title', () => {

packages/schematics/angular/application/files/standalone-files/src/app/app.component.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.component.<%= style %>'<% } %>
 })
 export class AppComponent {
-  title = '<%= name %>';
+  title = signal('<%= name %>');
 }