refactor: Migrate to signal-based input/output, use self-closing tags

apps/analog-app/src/app/app.component.ts

@@ -8,9 +8,8 @@ import { TopBarComponent } from '@analogjs/top-bar';
   imports: [TopBarComponent, RouterOutlet],
   template: `
     <analogjs-top-bar />
-
     <div class="container">
-      <router-outlet></router-outlet>
+      <router-outlet />
     </div>
   `,
 })

apps/analog-app/src/app/pages/(home).page.ts

@@ -30,8 +30,7 @@ export const routeMeta: RouteMeta = {
       <p>Description: {{ product.description }}</p>
       }
       <button type="button" (click)="share()">Share</button>
-      <app-product-alerts [product]="product" (notify)="onNotify()">
-      </app-product-alerts>
+      <app-product-alerts [product]="product" (notify)="onNotify()" />
     </div>
     }
   `,

apps/analog-app/src/app/pages/client/(client).page.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ServerOnly } from '@analogjs/router';
 
 @Component({
-  standalone: true,
   imports: [ServerOnly],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `

apps/analog-app/src/app/pages/products.[productId].page.ts

@@ -9,7 +9,6 @@ import { Product } from '../products';
 
 @Component({
   selector: 'app-product-details',
-  standalone: true,
   imports: [CurrencyPipe],
   template: `
     <h2>Product Details</h2>

apps/analog-app/src/app/pages/shipping/index.page.ts

@@ -1,12 +1,10 @@
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 
-import { Observable } from 'rxjs';
 import { CartService } from '../../cart.service';
 
 @Component({
   selector: 'app-shipping',
-  standalone: true,
   imports: [CurrencyPipe, AsyncPipe],
   template: `
     <h3>Shipping Prices</h3>
@@ -26,6 +24,5 @@ import { CartService } from '../../cart.service';
 export default class ShippingComponent {
   private readonly cartService = inject(CartService);
 
-  shippingCosts: Observable<{ type: string; price: number }[]> =
-    this.cartService.getShippingPrices();
+  shippingCosts = this.cartService.getShippingPrices();
 }

apps/analog-app/src/app/product-alerts/product-alerts.component.ts

@@ -1,17 +1,17 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 import { Product } from '../products';
 
 @Component({
   selector: 'app-product-alerts',
   template: `
     <p>
-      @if ( product && product.price > 700 ) {
+      @if ( product() && product()!.price > 700 ) {
       <button type="button" (click)="notify.emit()">Notify Me</button>
       }
     </p>
   `,
 })
 export class ProductAlertsComponent {
-  @Input() product: Product | undefined;
-  @Output() notify = new EventEmitter();
+  readonly product = input.required<Product>();
+  notify = output();
 }