Skip to main content

map

map is an operator that let you transform the values emitted by the source signal. It takes each value, applies a provided function to it, and emits the result as a new value in the target signal.

map<T, K>(mapFn: (value: T) => K, options: SignalMapOptions<K> = {}): K

Parameters​

mapFnThe callback to transform the emitted values from the source signal.
optionsOptional. The combination of CreateEffectOptions and CreateSignalOptions (excluding the allowSignalWrites property)

Example​

Calculate the square of the source​

@Component({
  template: `
    <p>Source: {{ source() }}</p>
    <p>Square: {{ square() }}</p>
  `
})
export class SquareComponent {

  source = signal(10);
  square = signalPipe(this.source, map(val) => val * val); // 100
}
info

map doesn't track the changes of any signals used in the given callback function, so avoid using any other signals inside of the callback function and expecting the library to track and update.