typescript 58 lines · 7 steps

A signal-based preferences store in Angular

An Angular service holds user preferences in a signal and auto-persists every change to localStorage with an effect.

Explained by highlit
Angular Intermediate signals state-management persistence reactivity dependency-injection
1import { Injectable, effect, signal, computed } from '@angular/core';
2 
3interface Preferences {
4 theme: 'light' | 'dark';
5 fontSize: number;
6 sidebarCollapsed: boolean;
7}
8 
9const STORAGE_KEY = 'app.preferences';
10 
11const DEFAULTS: Preferences = {
12 theme: 'light',
13 fontSize: 14,
14 sidebarCollapsed: false,
15};
16 
17function loadPreferences(): Preferences {
18 try {
19 const raw = localStorage.getItem(STORAGE_KEY);
20 return raw ? { ...DEFAULTS, ...JSON.parse(raw) } : DEFAULTS;
21 } catch {
22 return DEFAULTS;
23 }
24}
25 
26@Injectable({ providedIn: 'root' })
27export class PreferencesStore {
28 private readonly state = signal<Preferences>(loadPreferences());
29 
30 readonly theme = computed(() => this.state().theme);
31 readonly fontSize = computed(() => this.state().fontSize);
32 readonly sidebarCollapsed = computed(() => this.state().sidebarCollapsed);
33 
34 constructor() {
35 effect(() => {
36 const current = this.state();
37 localStorage.setItem(STORAGE_KEY, JSON.stringify(current));
38 });
39 }
40 
41 toggleTheme(): void {
42 this.state.update((prefs) => ({
43 ...prefs,
44 theme: prefs.theme === 'light' ? 'dark' : 'light',
45 }));
46 }
47 
48 setFontSize(fontSize: number): void {
49 this.state.update((prefs) => ({ ...prefs, fontSize }));
50 }
51 
52 toggleSidebar(): void {
53 this.state.update((prefs) => ({
54 ...prefs,
55 sidebarCollapsed: !prefs.sidebarCollapsed,
56 }));
57 }
58}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1A single signal holding one object is a clean way to model related settings as one reactive unit.
  2. 2An effect turns persistence into a side effect that fires automatically whenever the tracked signal changes.
  3. 3Exposing computed selectors keeps consumers reading narrow slices while writes stay funneled through update methods.

Related explainers

typescript 
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection
Intermediate 8 steps
typescript 
import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';
 

Validating env config at boot in NestJS

configuration schema-validation environment-variables
Intermediate 8 steps
java 
@Component
@Converter
public class EncryptedStringConverter implements AttributeConverter<String, String> {
 

Transparent column encryption in Spring & JPA

encryption aes-gcm jpa-converter
Advanced 10 steps
typescript 
import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup
Intermediate 8 steps
java 
package com.acme.billing.config;
 
import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
import org.springframework.boot.context.properties.ConfigurationProperties;

Feature-flagged beans with Spring @ConditionalOnProperty

feature-flags conditional-beans strategy-pattern
Intermediate 5 steps
typescript 
import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation
Intermediate 8 steps

Share this explainer

Here's the card — post it anywhere.

A signal-based preferences store in Angular — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code