title: Variable not updating in NgOnInit
body: <p>I am building an app that uses two components:</p>
  
  <ol>
  <li>nav</li>
  <li>content</li>
  </ol>
  
  <p>it also uses a shared service that makes API calls and stores shared functions:</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;
    constructor(private http: HttpClient) { }
    public 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><strong>nav component</strong></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; {
        //console.log(data);
        this.menus = data;
    });
    }
   public change_val(element_id){
      console.log("This " + element_id + " comes from nav.component")
  
      this.api.change_val(element_id)
      this.api.getData(element_id)
   }
  }
  </code></pre>
  
  <p><strong>content component</strong></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")
    });
   }
  }
  </code></pre>
  
  <p>In the above content.component.ts, the string in the console.log is undefined when the app first runs. </p>
  
  <p>Using the following interface from nav.component.html, I can pass the same id value to all functions as follows:</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;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Upon inspection, one can see the shared variable element_id is established with no value in the service and is supposed to update when a user clicks on each button in the view. When the app first opens or is refreshed, element_id is undefined (not sure how to fix this), but as soon as I click on any button, element_id in the nav component and the service is updated, but not in the content component. </p>
  
  <p>Does ngOnInit get run once and then not again until the app refreshes? I need the following to update every time element_id changes.</p>
  
  <pre><code>   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")
  </code></pre>