Avoiding RxJS interoperability overhead (toObservable and toSignal back-and-forth conversion).
Stabilisation hangs during Server-Side Rendering (SSR) by safely bypassing timer registrations.
Complex and error-prone memory management with automatic DestroyRef cleanup.

Key features:

debouncedSignal — delays emitting values until a specified time window of silence.
throttledSignal — limits emissions to at most once per specified time window, supporting leading/trailing configurations.
timerSignal — native delay and periodic interval signals.
Custom Injector support — allowing execution outside of an active injection context.

Example usage:

// Debounce search inputs
const search = signal('');
const debouncedSearch = debouncedSignal(search, 300);

// Throttled scroll triggers
const scrolled = throttledSignal(scrollOffset, 150);

// Periodic ticker
const timer = timerSignal(1000, 2000); // starts after 1s, ticks every 2s

Installation:

pnpm add @angular-helpers/core

`@angular-helpers/security`

Advanced regular expression security and ReDoS prevention

Documentation: https://gaspar1992.github.io/angular-helpers/docs/security

What it solves:

ReDoS (Regular Expression Denial of Service) attacks caused by malicious or expensive patterns.
Safe validation of complex regular expressions without blocking your app.
Controlled regex execution with timeout and security analysis.

Key features:

ReDoS prevention with automatic risky pattern checks.
Web Worker execution to avoid blocking the main thread.
Configurable timeout to limit expensive regex operations.
Risk analysis with complexity metrics and recommendations.
Builder pattern for fluent secure-regex configuration.

Example usage:

// Safe regex validation for user input
const result = await securityService.testRegex(userInput, text, {
  timeout: 5000,
  safeMode: true,
});

// Builder pattern for complex patterns
const { pattern, security } = RegexSecurityService.builder()
  .pattern('\\d+')
  .timeout(3000)
  .safeMode()
  .build();

Installation:

pnpm add @angular-helpers/security

`@angular-helpers/browser-web-apis`

Unified and safe browser API access with permissions and robust error handling

Documentation: https://gaspar1992.github.io/angular-helpers/docs/browser-web-apis

What it solves:

API fragmentation across browsers.
Permission complexity for sensitive browser features.
Compatibility checks that usually require repetitive boilerplate.
Inconsistent error handling across web APIs.

Key features:

Camera access and stream control.
Geolocation with watch support and typed errors.
Notifications with permission-aware behavior.
Clipboard utilities.
Media Devices enumeration and media access.
Centralized permission utilities.
Device/browser API wrappers with fallback checks.
Signal Fn primitives — 14 zero-boilerplate reactive inject functions (injectPageVisibility, injectResizeObserver, injectIntersectionObserver, injectNetworkInformation, injectScreenOrientation, injectMutationObserver, injectPerformanceObserver, injectIdleDetector, injectGamepad, injectClipboard, injectGeolocation, injectBattery, injectWakeLock, injectEyeDropper) with automatic cleanup and viewChild signal support.
Web Locks — Cross-tab resource coordination.
Storage Manager — Storage quotas and persistence.
Compression Streams — Gzip/deflate compression.

Installation:

pnpm add @angular-helpers/browser-web-apis

`@angular-helpers/worker-http`

Angular HTTP over Web Workers — off-main-thread HTTP pipelines

Documentation: https://gaspar1992.github.io/angular-helpers/docs/worker-http

What it solves:

Main-thread blocking from heavy HTTP payloads and serialization.
Request signing complexity with WebCrypto HMAC.
Serialization overhead with pluggable format support.

Key features:

Off-main-thread HTTP pipelines via Web Workers.
Typed RPC bridge for structured worker communication.
WebCrypto HMAC request signing.
Pluggable serializers (TOON, seroval, auto-detect).
Telemetry hooks for APM / metrics integration.
SSR + hydration — automatic fallback with transfer cache support.
ng add schematic for zero-config setup.

Installation:

pnpm add @angular-helpers/worker-http

`@angular-helpers/openlayers`

A modern Angular wrapper for OpenLayers with modular architecture and standalone components

Documentation: https://gaspar1992.github.io/angular-helpers/docs/openlayers

What it solves:

Imperative OpenLayers API — wraps it in declarative Angular components.
Bundle bloat — modular sub-entry points import only what you need.

Key features:

Standalone components for maps, layers, controls, interactions, and overlays.
Signals integration — native Angular signals for reactive state.
Modular loading — core, layers, controls, interactions, overlays sub-entries.
Popups & tooltips — declarative and programmatic overlay API.
Time-series playback — 60FPS animation timing loop running off-zone via requestAnimationFrame and a premium <ol-timeline> control panel.

Installation:

pnpm add @angular-helpers/openlayers ol

`@angular-helpers/storage`

Premium, high-performance, and secure reactive storage system with L1/L2 caching, schema drift validation, and encryption

Documentation: https://gaspar1992.github.io/angular-helpers/docs/storage

What it solves:

Local state synchronization between synchronous UI signals and asynchronous storage backends.
Data corruption/schema drift on client databases across application updates.
Storage size limitations and unencrypted local data at rest.

Key features:

L1 + L2 Cache — Synchronous Signal state backed by asynchronous IndexedDB, Cache API, or WebStorage.
Schema Drift Validation — Native validation guards with automatic database self-repair.
TOON Compression — Reduces JSON payloads by 30-60%, bypassing standard 5MB browser limits.
AES-GCM Encryption — Native WebCrypto asynchronous encryption for secure data at rest.
Entity Store — Surgical key-level reactive state management with frozen runtime immutability.

Example usage:

const userPref = injectStorageSignal('user-pref', 'light-mode', {
  storageType: 'local',
  validator: (data): data is 'light-mode' | 'dark-mode' =>
    data === 'light-mode' || data === 'dark-mode',
});

Installation:

pnpm add @angular-helpers/storage

`@angular-helpers/testing`

Lightweight, high-performance testing utilities and mocks for modern Angular applications

Documentation: https://gaspar1992.github.io/angular-helpers/docs/testing

What it solves:

Verbose TestBed boilerplate when writing unit/integration tests.
Complex mock setups for components, pipes, services, and routers.
Asynchronous effect evaluation in testing environments.

Key features:

render() — Intuitive wrapper for rendering standalone components, binding inputs/outputs, and testing <ng-content>.
Mocking Utilities — Quick spies and mocks via provideMockService(), MockComponent(), and MockPipe().
Routing Mocks — Seamless routing simulations with provideMockRouter() and provideMockActivatedRoute().
Signal Testing — flushEffects() to manually trigger and evaluate effect() queues synchronously.

Installation:

pnpm add @angular-helpers/testing -D

Why Angular Helpers?

Immediate Productivity

Unified APIs for common browser capabilities.
Strict TypeScript support and better autocomplete.
Practical examples and ready-to-use patterns.
End-to-end browser test coverage in CI.

Security by Default

ReDoS prevention tools for regex-heavy flows.
Permission-aware wrappers for sensitive APIs.
Worker-based isolation for expensive operations.
Predictable error handling paths.

Modern Stack Alignment

Built for modern Angular versions and patterns.
Browser-focused utilities tested with Playwright.
Actively maintained workflows and test harnesses.

Quick Start

Workspace Setup

# Clone the repository
git clone https://github.com/Gaspar1992/angular-helpers
cd angular-helpers

# Install dependencies
pnpm install

# Generate local SSL certificates
pnpm run ssl:generate

# Start demo app over HTTPS
pnpm run start:https

Use in Your Project

# Install the packages you need
pnpm add @angular-helpers/core
pnpm add @angular-helpers/security
pnpm add @angular-helpers/browser-web-apis
pnpm add @angular-helpers/storage
pnpm add @angular-helpers/worker-http
pnpm add @angular-helpers/openlayers ol
pnpm add @angular-helpers/testing -D

For modern Angular standalone integration, check each package's own README.

Comparison

Feature	Angular Helpers	Manual Implementation	Other Libraries
ReDoS Protection	Built-in	Manual	Partial
Browser APIs	Unified	Fragmented	Limited
Worker HTTP	Drop-in	Complex	None
OpenLayers	Declarative	Imperative	Limited
TypeScript	Full support	Partial	Minimal
Testing	Included	Manual	Basic
Documentation	Comprehensive	Missing	Basic
Support	Active	Team-owned only	Varies

Development

Available Scripts

# Generate SSL certificates (local/CI)
pnpm run ssl:generate

# Local HTTPS development (required for secure browser APIs)
pnpm run start:https

# Build all packages
pnpm run build:packages

# Unit tests
pnpm test

# Browser tests on Chromium
pnpm run test:browser

# Browser tests for CI (Chromium, 1 worker)
pnpm run test:browser:ci

# Cross-browser smoke tests (Firefox + WebKit)
pnpm run test:browser:cross

# Workspace linting
pnpm run lint

Project Structure

angular-helpers/
├── packages/
│   ├── core/              # 📦 @angular-helpers/core
│   ├── security/          # 📦 @angular-helpers/security
│   ├── browser-web-apis/  # 📦 @angular-helpers/browser-web-apis
│   ├── storage/           # 📦 @angular-helpers/storage
│   ├── worker-http/       # 📦 @angular-helpers/worker-http
│   ├── openlayers/        # 📦 @angular-helpers/openlayers
│   └── testing/           # 📦 @angular-helpers/testing
├── src/                   # 🚀 Demo application
├── public/content/blog/   # ✍️ Blog articles
├── docs/                  # 📚 Documentation
└── scripts/               # 🔧 Automation scripts

Roadmap

Planned

@angular-helpers/pwa — Service Worker and PWA capabilities.

In Progress

Runtime and bundle-size improvements across all packages.
More real-world examples and demos.

Contributing

Contributions are welcome.

Getting Started

# Fork and clone
git clone https://github.com/your-user/angular-helpers
# or fork from https://github.com/Gaspar1992/angular-helpers
cd angular-helpers

# Create a feature branch
git checkout -b feature/your-feature

# Commit and push
git commit -m "feat: add your feature"
git push origin feature/your-feature

Contribution Guides

SSR/SSG Implementation

License

MIT License — see LICENSE for details.

� Blog

Articles about library design decisions, Angular patterns, and the evolution of Angular Helpers. They live as Markdown files in public/content/blog/ and are rendered on the web.

� Useful Links

Issues & Feature Requests: GitHub Issues
Discussions: GitHub Discussions
NPM Organization: npmjs.com/org/angular-helpers

If Angular Helpers helps your team, consider starring the repository.

Made with by the Angular Helpers Team

Keywords

angular web-worker http off-main-thread interceptors webcrypto hmac serialization toon performance