V4 - fromEvent (Rxjs) - ERROR TypeError: Invalid event target

Ionic Framework
1

I’m trying to get the event from an input field but the following error occurs (same error for ngAfterViewInit / ionViewDidEnter):

ERROR TypeError: Invalid event target
    at setupSubscription (fromEvent.js:50)
    at Observable._subscribe (fromEvent.js:24)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
    at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:23)
    at PeoplePage.push../src/app/people/people.page.ts.PeoplePage.ionViewDidEnter (people.page.ts:88)
    at HTMLElement.handler (angular-delegate.js:101)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)

people.page.ts

import {concat, fromEvent, Observable, of, pipe} from 'rxjs';
...
    @ViewChild('searchInput') searchInput: ElementRef;
  
    ionViewDidEnter() {
        fromEvent<any>(this.searchInput.nativeElement, 'keyup')
            .pipe(
                map(ev => ev.target.value)
            )
            .subscribe(console.log); // <--- The error occurs here.

people.page.html

<ion-input placeholder="Name" #searchInput> </ion-input>

Ionic:

   ionic (Ionic CLI)             : 4.5.0
   Ionic Framework               : @ionic/angular 4.0.0-beta.19
   @angular-devkit/build-angular : 0.7.5
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.2
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1 
   NodeJS            : v11.5.0
   npm               : 6.5.0
   OS                : Linux 4.15
2

Solution:

Add “{read: ElementRef}” to the @ViewChild variable.

So this line:

@ViewChild('searchInput') searchInput: ElementRef;

Becomes:

@ViewChild('searchInput', { read: ElementRef ) searchInput: ElementRef;

Source:

1 Like