title: Angular 2 Global Variable across multiple component instances
body: <p>I have two components on one page:  Component1 and Component2.  Inside each of those is Component3.  Obviously each Component 3 is its own instantiation of the component.  However, I would like a global variable between the two.  I'm creating a side-by-side comparison of some data, and would like an accordion to work, so when I click to expand the accordion on one Component 3, the other one also opens.  I have been searching for hours and cannot find a resolution to this.</p>
  
  <p>What I want is, for instance:</p>
  
  <pre><code>(click) = "changeGlobalVar()"
  </code></pre>
  
  <p>to change the global variable.  Then I would like to have</p>
  
  <pre><code>*ngIf="globalVar"
  </code></pre>
  
  <p>That way, the <code>ngIf</code> works on both Component 3, no matter which one I click on. </p>
  
  <p>Could someone please help me out?  I've been searching for an answer to this for hours.</p>
  
  <p>Here's what my service code looks like but doesn't seem to be working:</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  
  @Injectable()
  export class DropDownService {
  
    public _acDropDownToggle: boolean;
  
    setValue(val) {
      this._acDropDownToggle = val;
    }
  
    getValue() {
      return this._acDropDownToggle;
    }
  
  }
  </code></pre>