Angular2: how to initially trigger Control.valueChanges

Viewed 1814
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 });
}
3 Answers

With RxJS 6 / 7 new syntax:

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