Create Observable from Event using FromEvent in Angular

Syntax

                              

fromEvent<T>(target: FromEventTarget<T>, 
             eventName: string, 
             options: EventListenerOptions, 
             resultSelector: (...args: any[]) => T): Observable<T>
                            
                        

FromEventTarget is the first argument to fromevent. It can be a DOM EventTarget, Node.js EventEmitter, JQuery-like event target, NodeList or HTMLCollection. The target must have a method to register/unregister the event handler. (addEventListener/ removeEventListener in case of DOM Event target)

eventName is the second argument, which is a type of event we want to listen to.

Options are the additional argument that we want to pass to , when registering the event handler i.e addEventListener

resultSelector is optional and will be deprecated in future versions.

Example of fromEvent

To create an observable from any event, first, we need to get the reference to DOM element using the viewchild & ElementRef. For example the following code gets the reference to the button element with the id #btn

                              
 
//Template
<button #btn>Button</button>
                            
                        

                              

//Component
 
@ViewChild('btn', { static: true }) button: ElementRef;
 
                            
                        

The code this.button.nativeElement returns the native DOM element. We pass this as the first argument to the fromEvent to create an observable to the click event.

                              
 
  buttonClick() {
    this.buttonSubscription =  fromEvent(this.button.nativeElement, 'click')
        .subscribe(res => console.log(res));
  }
 
                            
                        

We can invoke the above method from the ngAfterViewInit method. Note that the @ViewChildwill not initialize the btn element until the ngOnInit Hence we are using the ngAfterViewInit here.

                              

  ngAfterViewInit() {
    this.buttonClick();
  }
 
 
                            
                        

How it works

When we subscribe to an observable, which we created using the fromEvent method, it registers the event handler using the addEventListener in the DOM element. Whenever the user clicks on the button, fromevent captures the value and emits it to the subscriber as the first argument. When we unsubscribe, it unregisters the event handler using the removeEventListener.

fromevent from button click

The following is the complete code of fromevent from a button click.

                              
 
import { Component, Input, ViewChild, ElementRef, AfterViewInit, OnInit, OnDestroy } from '@angular/core';
import { Observable, of, from, fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit , OnInit, OnDestroy {
 
  title = 'Angular fromEvent Example';
 
  @ViewChild('btn', { static: true }) button: ElementRef;
  
  buttonSubscription
 
  constructor(private elm: ElementRef) {
  }
 
  ngOnInit() {
  }
 
 
  ngAfterViewInit() {
    this.buttonClick();
  }
 
 
  buttonClick() {
    this.buttonSubscription =  fromEvent(this.button.nativeElement, 'click')
        .pipe(debounceTime(300))
        .subscribe(res => console.log(res));
  }
 
 
  ngOnDestroy() {
    this.buttonSubscription.unsubscribe()
  }
 
}
 
                            
                        

fromevent from scroll

The following code shows how to create observable from the window scroll event

                              

  scroll() {
    const source = fromEvent(window, 'scroll');
    source.subscribe(val => console.log(val));
  }
                            
                        

fromevent from keyup

The following code shows how to create observable from a keyUp event.

                              
 
//Component
 
@ViewChild('name', { static: true }) name: ElementRef;
 
ngAfterViewInit() {
    fromEvent(this.name.nativeElement, 'keyup')
      .subscribe(res => console.log(res));
  }
 
                            
                        

Reference

1. RxJs FromEvent API