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