Angular - Integrate initial values and filters values in async pipe

Question

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?

levi · Accepted Answer · 2022-07-20 16:26:35Z

1

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

answered Jul 20, 2022 at 16:26

levi

1,1772 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - Integrate initial values and filters values in async pipe

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related