title: Shared variable value not being 'shared' when updated
body: <p>I am building an Angular app that contains the following:</p>
  
  <p><strong>Very Important: 1 shared variable: element_id
  This variable is defined without a value and lives in a service called api.service.ts</strong></p>
  
  <p><strong>api.service.ts:</strong>
  This service contains 3 shared functions: 1 (getMenus) for getting the menu content from an API call, a second (getData) for getting data from the same API call and a third (change_val) that is called from the menu items in another component and changes the value of the shared variable (element_id) when each menu item is clicked. <strong>When the value of element_id changes, the new value is passed to getData and is supposed to pull new data from the API call. This isnt happening</strong>.</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ApiService {
    url = 'api address';
    element_id; //here is the shared variable
    constructor(private http: HttpClient) { }
  
    public getMenus(){
      console.log('This ' + this.element_id + ' comes from api.getMenus')
      return this.http.get(this.url);
    }
    public getData(element_id){
      console.log('This ' + element_id + ' comes from api.getData')
      return this.http.get(this.url);
    }
    public change_val(element_id){
      console.log('This ' + element_id + " comes from api.change_val");
      this.element_id = element_id;
    }
  }  
  </code></pre>
  
  <p>2 components</p>
  
  <p><strong>nav.component.ts</strong></p>
  
  <ol>
  <li>this contains the logic for constructing a menu from a REST API call</li>
  <li><p>this also contains a shred public function for changing the value of the shared variable (element_id):</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { ApiService } from '../api.service';
  
  @Component(
  {
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
  })
  
  export class NavComponent implements OnInit {
  menus;
  constructor(private api: ApiService,){}
  
  ngOnInit(){
  this.api.getMenus().subscribe((data: any[]) =&gt; {
  this.menus = data;
  });
  }
  
  public change_val(element_id){
  console.log('This ' + element_id + " comes from api.change_val");
  this.api.element_id = element_id;
  
  }
  }
  </code></pre></li>
  </ol>
  
  <p><strong>content.component.ts</strong></p>
  
  <ol>
  <li><p>this contains the logic for displaying content from an API call based on the value of element_id:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { ApiService } from '../api.service';
  
  @Component({
    selector: 'app-content',
    templateUrl: './content.component.html',
    styleUrls: ['./content.component.css']
  })
  export class ContentComponent implements OnInit {
    content;
    constructor(private api: ApiService) { }
  
   ngOnInit(){
      this.api.getData(this.api.element_id).subscribe(res =&gt; {
      this.content = res[this.api.element_id];
      console.log("This " + this.api.element_id + " is coming from content getData (via 
      api)");
      console.log(res[this.api.element_id]) ;
    } 
    )};
    }
  </code></pre></li>
  </ol>
  
  <p><strong>nav.component.html</strong></p>
  
  <pre><code>&lt;div *ngFor="let menu of menus; index as id"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;button (click)="change_val(id)"&gt;{{menu['course-lesson-name']}}&lt;/button&gt;   
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>content.component.html</strong></p>
  
  <pre><code>&lt;p&gt;{{content['course-lesson-content']}}&lt;/p&gt;
  </code></pre>
  
  <p>Problems:</p>
  
  <p>The content shows if I value element_id from the start, but doesn't change when the new values are passed to getData. The element_id value does update as required and is being logged to the console, but I need the getData to run each time the button.</p>
  
  <p>If I leave element_id without a value, the content doesnt show, but the element_values will still update when the buttons are clicked. For some reason, the updated value of element_id doesnt seem to be getting to getting from the nav component to the service and out to the content component, this should happen each time a button is clicked and the value of element_id updates.</p>