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 ponent 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 });
}

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 ponent 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 });
}

• javascript
• angular
• rxjs

• You van give it a default value countyTerm = new Control('Default value'); – Eric Martinez Commented Mar 18, 2016 at 4:15
• That does give the control a default value, but it still doesn't trigger valueChanges. – gxclarke Commented Mar 18, 2016 at 4:26

3 Answers 3

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));

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

With RxJS 6 / 7 new syntax:

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