- Filters values set to this signal directly upon the result of a filter function. - The filter function can be a guard function, changing the return type from the source type of the signal. -
-
-maxLengthFilter = filterSignal('', x => x.length < 5);
-onlyLowerCaseFilter = filterSignal('', (x): x is Lowercase<string> => !/[A-Z]/.test(x), {{ '{' }} initialValidValue: '' {{ '}' }});
-setFilters(value: string): void {{ '{' }}
- this.maxLengthFilter.set(value);
- this.onlyLowerCaseFilter.set(value);
-{{ '}' }}
-
- Creates a signal similar to Array.reduce or Rxjs's scan operator. When
- the signal is set, the callback function is executed with the prior and currently set value as arguments, returning a new value.
-
Like other reduce-like functions the value set to the signal does not have to be the same type returned from it.
-@if (text) {
+
-const calculator = extendSignal(5, {
- multiply: (s, multi) => s.update(x => x * multi);
-});
-calculator.multiply(3);
-console.log(calculator()); // 15;
-
- -const liftedArray = liftSignal([1, 2, 3], null, ['push']); -liftedArray.push(4) -console.log(liftedArray()); // [1, 2, 3, 4]; -
Array.reduce or Rxjs's scan operator,
- using a reducer function to create a new value from the current and prior values.
- Angular Signal Generators are purpose built signals meant to simplify common tasks encountered in Components. They work like vanilla signals, but they have extra capabilities built in to help extend a signal's functionality. - Most can be either used in a similar fashion to a writable signal, or be passed a reference to an existing signal to generate new values.
You can install these from npm @@ -10,27 +9,49 @@
- To learn more about how these signals are created, or some dos or don'ts when creating your own, - please check out the following articles: -
-+ Creates a signal whose value isn't changed until it a certain has passed since the last update. +
+ Adds new methods to an existing signal. +
++ "Lifts" methods from a signal's value to the signal itself just by passing a tuple of method names. +
++ 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. +
++ The Sequence Signal is useful for situations where you want to easily cycle between options. +
++ Creates a signal that emits based on a timer or interval. +
++ Tween animations inspired by Svelte/motion. +
scratchpad
+This is very similar to rxjs's debounce operator. This has two overloads - one where it accepts a signal and the value is debounced in a readonly signal, @@ -51,7 +51,7 @@ const inputDebounced = debounceSignal('', 500);
Extends a signal by adding new methods directly to the signal. The original signal's methods can even be hidden. @@ -19,15 +18,9 @@ import { SignalHeaderComponent } from '../controls/signal-header.component';
This is essentially just a wrapper for Object.assign.
- The only advantage over assign is
- this allows you to hide the original implementation of the source signal's methods.
+ The advantage over assign is that this allows you to hide the original implementation of the source signal's methods.
For example, you can have a set method that multiplies a value and uses the original set to actually set the signal's value.
- If changing how a signal's original methods work isn't something you need, then just use
- Object.assign or assign the functions directly.
-
"Lifts" methods from a signal's value to the signal itself just by passing a tuple of method names. The lifted methods should be those appropriate for mutating or updating the value. @@ -19,18 +18,6 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome'; Calling the push method will internally call signal.update() with a function that executes the push and returns the updated signal.
-
This creates a signal whose input value is automatically mapped to an output value.
The selector function can include signals or can be mapped directly from an array of signals.
diff --git a/projects/demo/src/app/demos/sequence-signal.component.ts b/projects/demo/src/app/signal-generators/sequence-signal.component.ts
similarity index 92%
rename from projects/demo/src/app/demos/sequence-signal.component.ts
rename to projects/demo/src/app/signal-generators/sequence-signal.component.ts
index 0974aaa..5a6d295 100644
--- a/projects/demo/src/app/demos/sequence-signal.component.ts
+++ b/projects/demo/src/app/signal-generators/sequence-signal.component.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { sequenceSignal } from 'projects/signal-generators/src/public-api';
-import { SignalHeaderComponent } from '../controls/signal-header.component';
+import { SignalHeaderComponent } from './signal-header.component';
@Component({
@@ -10,7 +10,7 @@ import { SignalHeaderComponent } from '../controls/signal-header.component';
standalone: true,
imports: [CommonModule, FormsModule, SignalHeaderComponent],
template: `
-
This accepts a sequence of values, and moves to the next value after every call to next. The sequence can be something simple as a toggle between states, or a complex sequence generated by a function. diff --git a/projects/demo/src/app/signal-generators/signal-header.component.ts b/projects/demo/src/app/signal-generators/signal-header.component.ts new file mode 100644 index 0000000..e85c09c --- /dev/null +++ b/projects/demo/src/app/signal-generators/signal-header.component.ts @@ -0,0 +1,19 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-signal-header', + standalone: true, + imports: [CommonModule], + template: ` +
This is very similar to rxjs's timer operator. It will be have like setTimeout or interval depending on the parameters passed. @@ -40,18 +41,15 @@ import { SignalHeaderComponent } from '../controls/signal-header.component';
- This function is heavily inspired by Svelte's tweened function. - It allows you to create engaging simple transition animations with just a signal. + A very blatant ripoff of Svelte's Tweened function. + This allows you to create engaging simple transition animations with just a signal. By default this can automatically tween between a number, array of numbers, or Record of numbers. - You can also pass an interpolation function to tween between objects of any type. + You can also pass an interpolation function to tween between objects of any type!