DEV Community

loading...
Angular

RxJS Tip: Creation Function: fromEvent()

deborahk profile image Deborah Kurata ・2 min read

The RxJS fromEvent is a creation function that emits events.

How Does It Work?

The fromEvent creation function takes in an event target object and event type string, creates an Observable, and emits the specified events as they occur.

It works with any document object model (DOM) element, such as buttons, input elements, and the document itself.

Find the list of valid event types in the Mozilla docs here.

Alt Text

The above example watches for click events on the myInput element.

Each click event is emitted and logged to the console.

How About Some Examples?

This example watches for click events anywhere on the document (web page). When a click event is emitted, it's x and y coordinates are logged.

// Click event on the document page
fromEvent(document, 'click').subscribe(
    (x: MouseEvent) => console.log(`x: ${x.x}, y: ${x.y}`)
);
Enter fullscreen mode Exit fullscreen mode

The following example first locates the element with an id of name. It then watches for keyup events in the name element. Each keyup event is emitted and it's key code is logged to the console.

// Keyup event on an input element
var input = document.getElementById('name');
fromEvent(input, 'keyup').subscribe(
    (x: KeyboardEvent) => console.log(`key: ${x.code}`)
);
Enter fullscreen mode Exit fullscreen mode

Here is a more complete Angular example. In the template, it uses a template reference variable (filterInput) on an input element.

Template

<input type='text' #filterInput/>
Enter fullscreen mode Exit fullscreen mode

In the component, it uses the ViewChild decorator to locate the element using the template reference variable (filterInput). In the ngAfterViewInit lifecycle hook method, it uses the fromEvent creation function, passing in the found element and the desired event (keyup).

Component

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { fromEvent } from 'rxjs';
@Component({
  templateUrl: './product-list.component.html'})
export class ProductListComponent implements AfterViewInit {
   @ViewChild('filterInput') filterElementRef: ElementRef;

   ngAfterViewInit(): void {
    fromEvent(this.filterElementRef.nativeElement, 'keyup').subscribe(
      (x: KeyboardEvent) => console.log(`key: ${x.code}`)
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Note that there are often more "Angular" ways to accomplish event handling using event binding. Consider using event binding as a first choice and only use fromEvent if event binding doesn't provide the features you require.

What Are Some Common Uses?

Here are some common uses of the fromEvent creation function.

Tracking and responding to click events.

fromEvent(document, 'click')
Enter fullscreen mode Exit fullscreen mode

Tracking and responding to keyboard events.

fromEvent(input, 'keyup')
Enter fullscreen mode Exit fullscreen mode

Tracking and responding to clipboard events.

fromEvent(document, 'paste')
Enter fullscreen mode Exit fullscreen mode

Where's the Code?

Here is a link to sample code demonstrating the fromEvent creation function. Feel free to fork it and try it out.

What About the Marble Diagram?

This is the fromEvent creation function shown on a marble diagram:

Alt Text
Thanks to @michael_hladky for this marble diagram.

Do you have another common use of fromEvent? If so, please leave a comment.

Enjoy!

Discussion (0)

pic
Editor guide