Angular Signal Generators

Angular Signal Generators is a library to help expand the usefulness of signals. This is done by exposing purpose built signals meant to simplify common tasks encountered in Components. They work like vanilla signals, but with extra capabilities built in.

Get Started

Function Demos

• Async

  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);
  

• Debounce

  G

  W

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

  Example

  Input

  Debounced

• Extend

  G

  W

  Adds new methods to an existing signal.

  Example

  WhisperYellClear

  Result

  hello

• Filter

  W

  Filters values set directly on the signal.

  Example

  Input

  Filteredno upper case letters please

• Lift

  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];
  

• Map

  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

• Reduce

  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

• Sequence

  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');
  

• Storage

  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

• Timer

  G

  W

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

  Example

  Time since start

  0

  PauseResumeRestart

• Tween

  G

  W

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

  Example

  0%50%100%