title: HttpInterceptor change response body based on value from other observable
body: <p>Some how i can't seem to change the response body based on the value from another observable which i can only get after i retrieved the response.</p>
  
  <p>Changing the request is pretty simple, i don't know how to do it with the response.</p>
  
  <pre><code>@Injectable()
  export class MyHttpInterceptor implements HttpInterceptor {
    constructor(private _injector: Injector) {
    }
  
    intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      return next.handle(request).map((event: HttpEvent&lt;any&gt;) =&gt; {
        if (!(event instanceof HttpResponse)) return event;             
  
        const translateService = this._injector.get(TranslateService);
  
        // retrieved the key from the reponse, now need to retrieve data from the translateservice   
        translateService.get(`${event.body.key}`).subscribe((value: string) =&gt; {
          event.body.message = value;
        });
  
         // how to return new response ??  
        return event.clone({ body: event.body });  
      });
    }
  }
  </code></pre>
  
  <p>so basically i want to return a new reponse body with a new property 'message' on it.</p>