Cannot read property 'nativeElement' in Angular

Question

I tried this solution

It did not help me.

Code:

@ViewChild('filter') filteru: ElementRef;

ngAfterViewInit() {

    this.dataSource = new ExampleDataSource(this.exampleDatabase);
    Observable.fromEvent(this.filteru.nativeElement, 'keyup')
      .debounceTime(150)
      .distinctUntilChanged()
      .subscribe(() => {
        if (!this.dataSource) { return; }
        this.dataSource.filter = this.filteru.nativeElement.value;
      });
  }

I import this:

import 'rxjs/add/observable/fromEvent';

are you sure that `this` is what you expect? (that it isn't undefinded) If it is undefinded, try adding `.bind(this)` after your subscription — kodeaben, Sep 28 '17 at 10:59
If your could replicate the issue in a plunkr, that would help a lot — kodeaben, Sep 28 '17 at 11:00

score 1 · Accepted Answer · answered Sep 28 '17 at 11:13

1

I guess you might have missed the imports

import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import {Observable} from 'rxjs/Observable';

Working Stackblitz link

answered Sep 28 '17 at 11:13

Rahul Singh

19,030
11
64
86

Cannot read property 'nativeElement' in Angular

1 Answers1