vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 04:43:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(project): update 19

Browse Source
This commit is contained in:
thomas
2025-01-29 20:35:05 +01:00
parent 3cea14982e
commit e0f6038f2d
2 changed files with 18 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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