Angular - Integrate initial values and filters values in async pipe

user_8622079 0
Viewed 41

I have this function that return an Observable's list of 'streets' by passing it city id:

getStreetsByCityId(id: number)

And it's the template:

<input type="text" [formControl]="search">
<ol>
  <li *ngFor="let s of list | async">{{s.name}}</li>
</ol>

Now, in this way i can initial the list:

this.list = this.mdSvc.getStreetsByCityIdObs(1)

And in this way i can handling the filter of the list:

 this.list  = this.search.valueChanges.pipe(
  filter(val => val),
  switchMap(val => this.mdSvc.getStreetsByCityIdObs(val))
);

What I am missing is how to do the two actions together: initial the list with values and also handling filter. I can not run the two actions one after one, because they will override each other.

My question is actually how to both initialize the list and also support the filters together?

switchmap observable rxjs angular
1 Answers

Ok i got it. I just had to add 'startWith' operator:

this.list  = this.search.valueChanges.pipe(
  startWith(1),
  switchMap(val => this.mdSvc.getStreetsByCityIdObs(val))
);
user_86220790
Related