Signals + Design Tokens in Angular 20: Cut Render Counts 71% and Lift Lighthouse Mobile 72→94

Why Angular Dashboards Look Fast but Repaint Themselves to Death

Challenge accepted: reduce renders, stabilize styling, and improve Core Web Vitals without freezing feature delivery.

Why Signals Paired with Design Tokens Matters for Angular 20+ Teams

Together, Signals and tokens tame both compute and paint paths—fewer renders and fewer reflows.

Step-by-Step: Signals Refactor and Tokenized Theme System

// tokens.store.ts
import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';

export interface TokensState {
  theme: 'light' | 'dark';
  density: 'comfortable' | 'compact';
  contrast: 'normal' | 'high';
  motion: 'on' | 'reduced';
}

const initial: TokensState = {
  theme: 'light',
  density: 'comfortable',
  contrast: 'normal',
  motion: 'on',
};

export const TokensStore = signalStore(
  withState(initial),
  withMethods((state) => ({
    setTheme(theme: TokensState['theme']) { patchState(state, { theme }); },
    setDensity(density: TokensState['density']) { patchState(state, { density }); },
    setContrast(contrast: TokensState['contrast']) { patchState(state, { contrast }); },
    setMotion(motion: TokensState['motion']) { patchState(state, { motion }); },
  }))
);

// filters.component.ts
import { Component, computed, inject, signal } from '@angular/core';
import { TokensStore } from './tokens.store';

@Component({
  selector: 'app-filters',
  templateUrl: './filters.component.html',
  standalone: true,
})
export class FiltersComponent {
  private tokens = inject(TokensStore);

  term = signal('');
  selectedKpi = signal<'reach'|'ctr'|'cpm'>('reach');
  dateRange = signal<{ from: Date; to: Date }>({ from: new Date(), to: new Date() });

  query = computed(() => ({
    term: this.term(),
    kpi: this.selectedKpi(),
    range: this.dateRange(),
    density: this.tokens.density(), // cross-cutting preference
  }));
}

<!-- filters.component.html -->
<input type="search" [value]="term()" (input)="term.set(($event.target as HTMLInputElement).value)" />
<select [value]="selectedKpi()" (change)="selectedKpi.set(($event.target as HTMLSelectElement).value as any)">
  <option value="reach">Reach</option>
  <option value="ctr">CTR</option>
  <option value="cpm">CPM</option>
</select>

Replace ngClass with Design Tokens: No More Layout Thrash

// app.component.ts
import { Component, HostBinding, inject, effect } from '@angular/core';
import { TokensStore } from './tokens.store';

@Component({
  selector: 'app-root',
  template: `<router-outlet />`,
})
export class AppComponent {
  private tokens = inject(TokensStore);

  @HostBinding('attr.data-theme') get theme() { return this.tokens.theme(); }
  @HostBinding('attr.data-density') get density() { return this.tokens.density(); }
  @HostBinding('attr.data-contrast') get contrast() { return this.tokens.contrast(); }
  @HostBinding('attr.data-motion') get motion() { return this.tokens.motion(); }

  // Optionally sync to documentElement for global libs like PrimeNG
  constructor() {
    effect(() => {
      const root = document.documentElement;
      root.setAttribute('data-theme', this.tokens.theme());
      root.setAttribute('data-density', this.tokens.density());
      root.setAttribute('data-contrast', this.tokens.contrast());
      root.setAttribute('data-motion', this.tokens.motion());
    });
  }
}

/* styles.scss */
:root[data-theme='light'] {
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --text: #1b1f23;
  --accent: #2f77ff;
}
:root[data-theme='dark'] {
  --surface: #111318;
  --surface-2: #161a20;
  --text: #e6e9ef;
  --accent: #6ea8ff;
}
:root[data-density='compact'] { --sp-1: 2px; --sp-2: 6px; --sp-3: 10px; }
:root[data-density='comfortable'] { --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; }
:root[data-contrast='high'] { --outline: 2px solid #ffbf00; }
:root[data-motion='reduced'] { --anim: 0ms; }

.app-card { background: var(--surface); color: var(--text); padding: var(--sp-3); }
.btn-primary { background: var(--accent); transition-duration: var(--anim, 160ms); }

Integrate PrimeNG and Charts Without Jank

// chart-host.component.ts
import { Component, computed, input, effect } from '@angular/core';
import { Highcharts } from 'highcharts';

@Component({ selector: 'app-chart-host', template: '<div id="chart"></div>' })
export class ChartHostComponent {
  data = input<number[]>();
  theme = input<'light'|'dark'>('light');

  options = computed(() => ({
    chart: { backgroundColor: 'transparent' },
    xAxis: { lineColor: this.theme() === 'dark' ? '#555' : '#ccc' },
    series: [{ data: this.data() }]
  }));

  constructor() {
    effect(() => {
      Highcharts.chart('chart', this.options());
    });
  }
}

Lighthouse CI Guardrails and Measurable Outputs

# .github/workflows/lhci.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  lhci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npm run build -- --configuration=production
      - run: npx http-server dist/app -p 4201 &
      - run: npx lhci autorun --assert.preset=lighthouse:recommended --collect.url=http://localhost:4201

Case Study Results: Telecom Analytics Dashboard

This is the same approach I’ve used rescuing airport kiosk software for a major airline and employee tracking dashboards at a global entertainment company—targeted, measurable, and safe.

When to Hire an Angular Developer for Legacy Rescue

See how I rescue chaotic code at gitPlumbers—stabilize your Angular codebase—and explore my NG Wave component library for Signals-driven UI patterns.

How an Angular Consultant Approaches Signals Migration

This is the playbook that lifted Lighthouse 72→94 with no downtime and no redesign.

Takeaways and Next Steps

Want to review your Angular build or discuss a Signals adoption plan? I’m currently accepting 1–2 select projects. See live products: NG Wave component library, the AI-powered verification system IntegrityLens, and the AI interview platform SageStepper.