fakeschedulers-ng-component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged, pluck } from 'rxjs/operators';

@Component({
  selector: 'some-component',
  template: `
  <form [formGroup]="form">
    <input formControlName="term" type="text">
  </form>
  <div class="searching" *ngIf="term$ | async as term">
    <span>Searching for {{ term }}</span>
  </div>
  `
})
export class SomeComponent {
  form: FormGroup;
  term$: Observable<string>;
  constructor(formBuilder: FormBuilder) {
    this.form = formBuilder.group({
      term: ['']
    });
    this.term$ = this.form.valueChanges.pipe(
      pluck('term'),
      debounceTime(400),
      distinctUntilChanged()
    ) as Observable<string>;
  }
}