How to target an HTML element using rxjs fromEvent in Angular 6

If you're reading this with Angular 8+, the correct way to reference @ViewChild-elements while being able to use them in ngOnInit is this:

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { fromEvent } from 'rxjs';

@Component({
  selector: 'my-app',
  template: `
    <input #yourTarget type="text">
    <input type="text">
  `
})
export class AppComponent implements OnInit, OnDestroy {
  @ViewChild('yourTarget', {static: true}) yourTarget: ElementRef;

  subscriptions = new Subscription();

  ngOnInit(): void {
    subscriptions.add(
      fromEvent(this.yourTarget.nativeElement, 'keyup')
        .subscribe(res => console.log(res.target.value))
    )
  }

  ngOnDestroy(): void {
    subscriptions.unsubscribe();
  }
}

Notice the {static: true} inside the @ViewChild declaration: It causes Angular to know the referenced element already in the lifeCycle "OnInit".

You can give the input field that you want to observe, a template variable.

You can use then use @ViewChild to get access to that input. And then use the nativeElement property on it.

Now the nativeElement property will only be accessible after the view has initialized. So you can use the AfterViewInit Component Lifecycle Hook in order to access it.

import { Component, ViewChild, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';

@Component({
  selector: 'my-app',
  template: `<input #toTarget type="text">
             <input type="text">`
})
export class AppComponent {

  @ViewChild('toTarget') toTarget: ElementRef;

  ngAfterViewInit() {
    fromEvent(this.toTarget.nativeElement, 'keyup')
      .subscribe(res => console.log(res.target.value));
  }
}

---

Here's an Updated StackBlitz for your ref.