Function eventSignal

  • eventSignal<T>(source, eventName, selector, options?): Signal<T | undefined>

  • Creates a signal that listens to a DOM object event and maps the event to a value, initially returning undefined if default is not set. Requires being in an injection context.

    Type Parameters

    • T

      The type of the return value from the signal which comes from the selector or initialValue if provided.

    Parameters

    • source: any

      The source the contains the target to listen to. Can be window, document, body, or an element ref, or anything else Renderer2 can listen to.

    • eventName: string

      The name of the event to listen to.

    • selector: ((event: any) => T)

      The selector to run when the event is emitted that will be output by the signal.

        • (event): T

        • Parameters

          • event: any

          Returns T

    • Optionaloptions: EventSignalOptions<T> & {
          initialValue?: undefined;
      }

      Options used when creating the signal.

    Returns Signal<T | undefined>

    Example

    const $viewElem = viewChild('div');
    const $bodyEvent = eventSignal('body', 'click', (event) => event.clientX);
    const $divEvent = eventSignal($viewElem, 'click', (event) => event.clientX);
    effect(() => console.log(`body: ${$bodyEvent()}`)); // initially undefined.
    effect(() => console.log(`div: ${$divEvent()}`)); // initially undefined.
  • eventSignal<T>(source, eventName, selector, options): Signal<T>

  • Creates a signal that listens to a DOM object event and maps the event to a value. Requires being in an injection context.

    Type Parameters

    • T

      The type of the return value from the signal which comes from the selector or initialValue.

    Parameters

    • source: any

      The source the contains the target to listen to. Can be window, document, body, or an element ref, or anything else Renderer2 can listen to.

    • eventName: string

      The name of the event to listen to.

    • selector: ((event: any) => T)

      The selector to run when the event is emitted that will be output by the signal.

        • (event): T

        • Parameters

          • event: any

          Returns T

    • options: EventSignalOptions<T> & {
          initialValue: T;
      }

      Options used when creating the signal.

    Returns Signal<T>

    Example

    const $viewElem = viewChild('div');
    const $bodyEvent = eventSignal('body', 'click', (event) => event.clientX, { initialValue: 0 });
    const $divEvent = eventSignal($viewElem, 'click', (event) => event.clientX, { initialValue: 0 });
    effect(() => console.log(`body: ${$bodyEvent()}`)); // initially 0.
    effect(() => console.log(`div: ${$divEvent()}`)); // initially 0.
  • eventSignal(source, eventName, options?): Signal<any>

  • Creates a signal that listens to a DOM object event and returns that event. Requires being in an injection context.

    Parameters

    • source: any

      The source the contains the target to listen to. Can be window, document, body, or an element ref, or anything else Renderer2 can listen to.

    • eventName: string

      The name of the event to listen to.

    • Optionaloptions: EventSignalOptions<any> & {
          initialValue?: any;
      }

      Options used when creating the signal.

    Returns Signal<any>

    Example

    const $viewElem = viewChild('div');
    const $bodyEvent = eventSignal('body', 'click');
    const $divEvent = eventSignal($viewElem, 'click');
    // The following emit HTML events:
    effect(() => console.log(`body: ${$bodyEvent()}`));
    effect(() => console.log(`div: ${$divEvent()}`));

Settings

Member Visibility