diff --git a/apps/testing/19-input-output/src/app/app.component.ts b/apps/testing/19-input-output/src/app/app.component.ts index b31047e..7e9e0f7 100644 --- a/apps/testing/19-input-output/src/app/app.component.ts +++ b/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: ` - + `, }) export class AppComponent { diff --git a/apps/testing/19-input-output/src/app/counter.component.ts b/apps/testing/19-input-output/src/app/counter.component.ts index a0cc94f..df1eed1 100644 --- a/apps/testing/19-input-output/src/app/counter.component.ts +++ b/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: ` - -

Counter: {{ counter }}

- - - -
+

Counter: {{ counter() }}

+ + + `, 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(); + public counter = linkedSignal(() => this.initialValue()); - @Output() send = new EventEmitter(); + send = output(); - 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); + }; }