angular 2 master-detail share observable for update -

in angular2 example toh, master component retrieves data via web api. hero.service returns observable.

and detail component retrieves data via web api id.

i see observable immutable client storage. if update hero in detail component push change observable first , when user hit save button post updated observable (to json) api server.

i thinking benefit reduce io traffic , keep master , detail in sync (i updated detail , automatically reflected in master).

hero.service.ts

import {injectable} 'angular2/core'; import {http, response, headers, requestoptions} 'angular2/http'; import {observable}     'rxjs/observable';  import {hero} './hero';  @injectable() export class heroservice {   private _heroesurl = 'http://localhost:8081/api/hero/';  // url web api   private _cachedheroes;    constructor (private http: http) {}          getheroes (): observable<hero[]> {       if (!this._cachedheroes) {           this._cachedheroes = this.http.get(this._heroesurl+"readall")                                         .map(this.extractdata)                                         .catch(this.handleerror);        }        return this._cachedheroes.share();   }    gethero (_id: number): observable<hero> {     return this.http.get(this._heroesurl+"read/"+_id.tostring())                     .map(this.extractdata)                     .catch(this.handleerror);   }    addhero (name: string): observable<hero>  {     let body = json.stringify({ name });     let headers = new headers({ 'content-type': 'application/json' });     let options = new requestoptions({ headers: headers });      return this.http.post(this._heroesurl, body, options)                     .map(this.extractdata)                     .catch(this.handleerror);   }     private extractdata(res: response) {     if (res.status < 200 || res.status >= 300) {       throw new error('bad response status: ' + res.status);     }     let body = res.json();     console.log(body.data);     return body || { };   }     private handleerror (error: any) {     let errmsg = error.message || 'server error';     console.error(errmsg); // log console instead     return observable.throw(errmsg);   } } 

in above cached master data _cachedheroes observable. question that

1. is idea let master , detail component share same observable data?
2. if yes, in gethero (_id: number): observable< hero >, instead of making api call, how can detail object out of _cachedheroes id?
3. and after updating detail or adding new detail object how put updated/new detail _cachedheroes?
4. and when want save how know object(s) in _cachedheroes should send database?

any recommended/best practice kind of issue?