feat(project): update 19

Author: tomalaforge

apps/testing/19-input-output/src/app/app.component.ts

@@ -5,7 +5,7 @@ import { CounterComponent } from './counter.component';
   imports: [CounterComponent],
   selector: 'app-root',
   template: `
-    <app-counter [initialValue]="10" (send)="log($event)"></app-counter>
+    <app-counter [initialValue]="10" (send)="log($event)" />
   `,
 })
 export class AppComponent {

apps/testing/19-input-output/src/app/counter.component.ts

@@ -1,44 +1,32 @@
-import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
-  Input,
-  Output,
+  input,
+  linkedSignal,
+  output,
 } from '@angular/core';
-import { LetDirective } from '@ngrx/component';
-import { ComponentStore } from '@ngrx/component-store';
 
 @Component({
   selector: 'app-counter',
-  imports: [AsyncPipe, LetDirective],
   template: `
-    <ng-container *ngrxLet="counter$ as counter">
-      <p data-testid="counter">Counter: {{ counter }}</p>
-      <button (click)="increment()">Increment</button>
-      <button (click)="decrement()">Decrement</button>
-      <button (click)="send.emit(counter)">Send</button>
-    </ng-container>
+    <p data-testid="counter">Counter: {{ counter() }}</p>
+    <button (click)="increment()">Increment</button>
+    <button (click)="decrement()">Decrement</button>
+    <button (click)="send.emit(counter())">Send</button>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CounterComponent extends ComponentStore<{ counter: number }> {
-  @Input() set initialValue(initialValue: number) {
-    this.patchState({ counter: initialValue });
-  }
+export class CounterComponent {
+  initialValue = input.required<number>();
+  public counter = linkedSignal(() => this.initialValue());
 
-  @Output() send = new EventEmitter<number>();
+  send = output<number>();
 
-  readonly counter$ = this.select((state) => state.counter);
+  public increment = () => {
+    this.counter.set(this.counter() + 1);
+  };
 
-  readonly increment = this.updater((state) => ({
-    counter: state.counter + 1,
-  }));
-  readonly decrement = this.updater((state) => ({
-    counter: state.counter - 1,
-  }));
-
-  constructor() {
-    super({ counter: 0 });
-  }
+  public decrement = () => {
+    this.counter.set(this.counter() - 1);
+  };
 }