title: Global variable in angular2 whose value can be changed
body: <p>I have injected one service while bootstrapping to use global variables:</p>
  
  <pre><code> bootstrap(AppComponent, [ GloablService ]);
  </code></pre>
  
  <p><strong>global.service.ts</strong></p>
  
  <pre><code>import {Http} from 'angular2/http';
  import {Observable} from 'rxjs/Observable';
  import {Observer} from 'rxjs/Observer';
  import 'rxjs/add/operator/share';
  
  export class GlobalService {
    baseUrl:string;
    constructor() {
      this.baseUrl='http://localhost:8080'; 
    }
    setBaseUrl(url:string) {
      this.baseUrl=url;  
    }
    getBaseUrl() {
      return this.baseUrl;  
    }
  }
  </code></pre>
  
  <p>Now I have bootstrapped this service along with my root component and i am able to access the variable successfully.</p>
  
  <p>But whenever I change the value of the variable in nested components the change is not reflected globally.</p>
  
  <p>I tried to use observables too but no use.   </p>
  
  <p>any suggestions?</p>