Angular2: how to initially trigger Control.valueChanges

Question

constructor(private _service: LocatorService) {
    this.counties = this.countyTerm.valueChanges
        .debounceTime(300)
        .distinctUntilChanged()
        .switchMap((term: string) => _service.getCounties(term));
}
counties: Observable<County[]>;
countyTerm = new Control();

As expected, this.counties is only populated once a value is entered into the countyTerm bound control.

How can I trigger valueChanges when this component is instantiated so that the set of counties is loaded initially?

I tried the following, but it had no effect ( implements OnInit was added to the class):

ngOnInit() {
    this.countyTerm.updateValue('', { emitEvent: true });
}

Answer 1

Just start your stream out with a fixed value. Something like this:

this.counties = Rx.Observable.of('')
        .concat(this.countyTerm.valueChanges.debounceTime(300))
        .distinctUntilChanged()
        .switchMap((term: string) => _service.getCounties(term));

Answer 2

Use startWith RxJS operator to emit something before stream.

this.counties = this.countyTerm.valueChanges
    .startwith('')
    .debounceTime(300)
    .distinctUntilChanged()
    .switchMap((term: string) => _service.getCounties(term));

http://reactivex.io/documentation/operators/startwith.html

Answer 3

With RxJS 6 / 7 new syntax:

this.counties$ = this.countyTerm.valueChanges.pipe(
      startWith(''),
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((term: string) => _service.getCounties(term))
);