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);
+ };
 }