Add ngrx

apps/angular-intro/src/app/app.component.html

@@ -3,4 +3,5 @@
   <app-counter />
   <app-counter-with-service />
   <app-counter-with-service />
+  <app-counter-with-ngrx />
 </div>

apps/angular-intro/src/app/app.component.ts

@@ -1,12 +1,17 @@
 import { Component } from '@angular/core';
-import { CounterComponent } from '../counter/counter.component';
-import { CounterWithServiceComponent } from '../counter-with-service/counter-with-service.component';
+import { CounterComponent } from '../components/counter/counter.component';
+import { CounterWithServiceComponent } from '../components/counter-with-service/counter-with-service.component';
+import { CounterWithNgRxComponent } from '../components/counter-with-ngrx/counter-with-ngrx.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
-  imports: [CounterComponent, CounterWithServiceComponent],
+  imports: [
+    CounterComponent,
+    CounterWithServiceComponent,
+    CounterWithNgRxComponent,
+  ],
 })
 export class AppComponent {
   title = 'angular-intro';

apps/angular-intro/src/app/app.config.ts

@@ -1,10 +1,30 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import {
+  ApplicationConfig,
+  isDevMode,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { appRoutes } from './app.routes';
+import { provideState, provideStore } from '@ngrx/store';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
+import { counterReducer } from '../state/counter-state';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(appRoutes),
+    provideStore(),
+    provideStoreDevtools({
+      maxAge: 25,
+      logOnly: !isDevMode(),
+      autoPause: true,
+      trace: false,
+      traceLimit: 75,
+      connectInZone: true,
+    }),
+    provideState({
+      name: 'counter',
+      reducer: counterReducer,
+    }),
   ],
 };

apps/angular-intro/src/components/counter-with-ngrx/counter-with-ngrx.component.html

@@ -0,0 +1,17 @@
+<div class="flex flex-row items-center gap-4">
+  <h3>
+    <app-value [value]="count" />
+  </h3>
+  <app-button (click)="increment()">+1</app-button>
+  <app-button (click)="decrement()">-1</app-button>
+
+  <div>
+    @if (count > 0) {
+    <p>Positive</p>
+    } @else if (count < 0) {
+    <p>Negative</p>
+    } @else {
+    <p>Zero</p>
+    }
+  </div>
+</div>

apps/angular-intro/src/components/counter-with-ngrx/counter-with-ngrx.component.ts

@@ -0,0 +1,40 @@
+import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { ChangeCount, selectCounter } from '../../state/counter-state';
+import { ValueComponent } from '../counter/value/value.component';
+import { ButtonComponent } from '../counter/button/button.component';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { map } from 'rxjs';
+
+@Component({
+  standalone: true,
+  selector: 'app-counter-with-ngrx',
+  templateUrl: './counter-with-ngrx.component.html',
+  imports: [ValueComponent, ButtonComponent],
+})
+export class CounterWithNgRxComponent implements OnInit {
+  private readonly store = inject(Store);
+  private readonly destroyRef = inject(DestroyRef);
+
+  count = 0;
+
+  ngOnInit(): void {
+    this.store
+      .select(selectCounter)
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        map((val) => val * 3)
+      )
+      .subscribe((count) => {
+        this.count = count;
+      });
+  }
+
+  increment() {
+    this.store.dispatch(ChangeCount({ diff: 1 }));
+  }
+
+  decrement() {
+    this.store.dispatch(ChangeCount({ diff: -1 }));
+  }
+}

apps/angular-intro/src/state/counter-state.ts

@@ -0,0 +1,24 @@
+import { createAction, createReducer, on, props } from '@ngrx/store';
+
+export interface CounterState {
+  count: number;
+}
+
+export const selectCounter = (state: any) => state.counter.count;
+
+export const ChangeCount = createAction(
+  'ChangeCount',
+  props<{ diff: number }>()
+);
+
+const initialState: CounterState = {
+  count: 0,
+};
+
+export const counterReducer = createReducer(
+  initialState,
+  on(ChangeCount, (state, { diff }) => ({
+    ...state,
+    count: state.count + diff,
+  }))
+);