Implement a Signals based service

app/src/app/settings.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { SignalsSimpleStoreService } from './signals.service';
+
+export interface SettingsState {
+  language: string;
+  debug: boolean;
+  servers: string[];
+}
+
+@Injectable()
+export class SettingsStateService extends SignalsSimpleStoreService<SettingsState> {
+  constructor() {
+    super();
+  }
+}

app/src/app/settings/settings.component.html

@@ -1 +1,11 @@
-<p>settings works!</p>
+<h1>Settings</h1>
+
+<br>
+Debug: {{ settings().debug }}
+<br>
+Servers: {{ settings().servers }}
+<br>
+Language: {{ settings().language }}
+<br>
+<br>
+<button mat-flat-button (click)="toggleDebug()">Toggle debug</button>

app/src/app/settings/settings.component.ts

@@ -1,12 +1,31 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { SettingsState, SettingsStateService } from '../settings.service';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-settings',
   standalone: true,
-  imports: [],
+  imports: [MatButtonModule],
   templateUrl: './settings.component.html',
-  styleUrl: './settings.component.scss'
+  styleUrl: './settings.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [SettingsStateService]
 })
 export class SettingsComponent {
 
+  debug = this.settingsState.select('debug');
+
+  readonly settings = this.settingsState.state.asReadonly();
+
+  constructor(private settingsState: SettingsStateService) {
+
+  }
+
+  toggleDebug() {
+    // Update single property
+    //this.settingsState.set('debug', !this.settings().debug);
+
+     // Update full or partial state
+     this.settingsState.setState({ debug: !this.settings().debug } as SettingsState);
+  }
 }

app/src/app/signals.service.ts

@@ -0,0 +1,40 @@
+import { Signal, computed, signal } from "@angular/core";
+
+export class SignalsSimpleStoreService<T> {
+  readonly state = signal({} as T);
+
+  constructor() {}
+
+  /**
+   * Returns a reactive value for a property on the state.
+   * This is used when the consumer needs the signal for
+   * specific part of the state.
+   *
+   * @param key - the key of the property to be retrieved
+   */
+  public select<K extends keyof T>(key: K): Signal<T[K]> {
+    return computed(() => this.state()[key]);
+  }
+
+  /**
+   * This is used to set a new value for a property
+   *
+   * @param key - the key of the property to be set
+   * @param data - the new data to be saved
+   */
+  public set<K extends keyof T>(key: K, data: T[K]) {
+    this.state.update((currentValue) => ({ ...currentValue, [key]: data }));
+  }
+
+  /**
+   * Sets values for multiple properties on the store
+   * This is used when there is a need to update multiple
+   * properties in the store
+   *
+   * @param partialState - the partial state that includes
+   *                      the new value to be saved
+   */
+  public setState(partialState: Partial<T>): void {
+    this.state.update((currentValue) => ({ ...currentValue, ...partialState }));
+  }
+}