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.

1. send a default value for result
2. delay
3. send server response

Can i use operators to achieve this?

Answer 1

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