Angular Signal Generators
    Preparing search index...

    Function eventSignal

    • 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.

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

        Options used when creating the signal.

      Returns Signal<undefined | T>

      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.

    • 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.

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

        Options used when creating the signal.

      Returns Signal<T>

      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.

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

      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