Angular Rxjs: emit all merged observables with delay continuously with async pipe

Question

Hello guys I'm trying to use a data object in html file and i'm using the async pipe and a subject to emit id and get server response.
Here is my code:

     logDetails$: Observable<LogDetails>;
     getDetails$ = new Subject<string>();

     this.logDetails$ = this.getDetails$.pipe(
        map(id => ApiRoutes.fileLogDetailsApiRoute.replace(":id", id)),
        switchMap(apiRoute => this.http.get<LogDetails>(apiRoute))
    );

I use an async pipe in my view to use subscribe for result.

*ngIf="logDetails$ | async; let details"

Now i want this behaviour: I emit the getDetails$ with id from multiple locations.
Then i need that before server call a null value for result get emmited to the view and then the server response (LogDetails object) after some delay.

send a default value for result
delay
send server response

Can i use operators to achieve this?

frido · Accepted Answer · 2020-08-28 17:23:36Z

2

You can use startWith and delay.

this.logDetails$ = this.getDetails$.pipe(
  map(id => ApiRoutes.fileLogDetailsApiRoute.replace(":id", id)),
  switchMap(apiRoute => this.http.get<LogDetails>(apiRoute).pipe(
    delay(1000),
    startWith(null)
  )),
);

answered Aug 28, 2020 at 17:23

frido

14.3k5 gold badges45 silver badges59 bronze badges

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

3 Comments

Armin Torkashvand Over a year ago

@fridoo You made my day! A question: when i use the startWith on http.get pipe it's working as expected, but when i move it to the first level pipe the first value is not get emitted. why? but others get.

frido Over a year ago

@ArminTorkashvand The observable you in return in switchMap gets subscribed to when ever getDetails$ emits. The outer observable gets subscribe to only once (I guess).

Armin Torkashvand Over a year ago

@fridoo That's true!

Collectives™ on Stack Overflow

Angular Rxjs: emit all merged observables with delay continuously with async pipe

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related