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

• gatedEffect

  U

  An effect that starts, stops or runs based on conditions passed to options.

  Example

  // This will run only once, after $userInfo is set. const $userInfo = signal<UserInfo | undefined>(undefined); gatedEffect(() => doSomethingWithRequiredUserInfo($userInfo()!), { start: () => $userInfo() !== undefined, times: 1 });

• historySignal

  G

  W

  Creates a writable signal with undo and redo history.

  Example

  UndoRedo

• 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' }

• onlineSignal

  G

  Reports the browser's online status, or undefined when the status is unknown.

  Example

  Browser status: Unknown (undefined)

  Go offline by disabling wifi or using developer tools to see the status change.

• pageVisibleSignal

  G

  Reports whether the page is visible, or undefined when visibility is unknown.

  Example

  Play the melody, then switch tabs. Music pauses while hidden and resumes when you return.

• 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

• resourceRefToPromise

  U

  Converts an Angular resource reference into a promise that resolves on completion.

  Example

  const userResource = getUserResource(); const user = await resourceRefToPromise(userResource, injector);

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

• springSignal

  G

  W

  Animates changes to a signal's value with a realistic spring transition.

  Example

  0%50%100%

• 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

• throttleSignal

  G

  W

  Limits how frequently a signal publishes rapidly changing values.

  Example

  Move the pointer here

  Raw: 0, 0

  Throttled: 0, 0

  Throttled once per second

• tweenSignal

  G

  W

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

  Example

  0%50%100%