Angular Signal Generators

Streamline your Angular development with Angular Signal Generators, a library of signals and utilities designed to replace common patterns for faster, cleaner code.

Get Started

Function Demos

• asyncSignal

  G

  W

  "Flattens" a source of promises or observables to a signal of result values, switching to the new source as soon as it changes.

  Example

  $id = signal(0);
  // call getCustomer every time $id changes.
  $customer = asyncSignal(() => this.$id() !== 0 ? this.getCustomer(this.$id()) : undefined);
  

• debounceSignal

  G

  W

  Creates a signal whose value isn't changed until it a certain has passed since the last update.

  Example

  Input

  Debounced

• eventSignal

  G

  Listens to DOM Events

  Example

  Monitor clicks from: Button 1Button 2Button 3

  Button 1Button 2Button 3

  No clicks yet

• filterSignal

  W

  Filters values set directly on the signal.

  Example

  Input

  $filteredno upper case letters please

• inspect

  U

  Outputs any changes to deeply nested signals.

  Example

  $age = signal(21);
  $name = signal('Danny');
  inspect({ age: $age, name: $name }); // [LOG]: { age: 21, name: 'Danny' }
  $age.set(102); // [LOG]: { age: 102, name: 'Danny' }
  

• intersectionSignal

  G

  W

  Wraps IntersectionObserver so that changes in the intersection of an element with its ancestor can be observed.

  Example

  Scroll Me Horizontally

  Is Not Intersecting

• liftSignal

  G

  W

  "Lifts" methods from a signal's value to the signal itself just by passing a tuple of method names.

  Example

  const liftedArray = liftSignal([1, 2, 3], null, ['push']);
  liftedArray.push(4)
  console.log(liftedArray()); // [1, 2, 3, 4];
  

• mapSignal

  G

  W

  Creates a signal whose input value is immediately mapped to a different value based on a selector. Either a value or multiple signals can be passed and used in the selector function.

  Example

  Input

  Doubled2

• mediaQuerySignal

  G

  W

  Takes a media query, and updates its value whenever the state of that query being matched changes.

  Example

  Query

  OrientationMin Width

  Orientation: Landscape

• mutationSignal

  G

  W

  Wraps MutationObserver so changes made to the properties of an element can be observed.

  Example

  RedGreenBlue

  Change Me

  Last Change: No Changes

• nestSignal

  G

  W

  Takes a value that contains one or more nested signals and emits their resolved values.

  Example

  $age = signal(21);
  $name = signal('Danny');
  $nest = nestSignal({ age: $age, name: $name });
  console.log($nest()); // [LOG]: { age: 21, name: 'Danny' }
  

• reduceSignal

  W

  Creates a signal similar to Array.reduce or Rxjs's scan operator, using a reducer function to create a new value from the current and prior values.

  Example

  Sum

  Summed: 0

• resizeSignal

  G

  W

  Wraps ResizeObserver so changes made to the dimensions of an element can be observed.

  Example

  Element Width

  No Changes

• sequenceSignal

  G

  W

  The Sequence Signal is useful for situations where you want to easily cycle between options.

  Example

  Choice A

  Choice B

  Choice C

  Next Choice

• signalToIterator

  U

  This converts a signal into an AsyncIterator where is can be used in a for async loop.

  Example

  const source = signal('start');
  for await (const item of signalToIterator(source)) {
    console.log(item); // 'start', 'next'
  }
  source.next('next');
  

• storageSignal

  W

  A signal that uses a secondary store to persist values beyond an application's lifetime. with built-in localStorageSignal and sessionStorageSignal implementations.

  Example

  Input

  Refresh page to see value persist

• timerSignal

  G

  W

  Creates a signal that emits based on a timer or interval.

  Example

  Time since start

  0

  PauseResumeRestart

• tweenSignal

  G

  W

  Tween animations that allow a signal to transform between values over a set duration.

  Example

  0%50%100%