title: Angular 5 share variable between two components
body: <p>I have a shared variable I want to declare in both component and I want the components to have shared values. I was wondering if this can be done.</p>
  
  <p>A.html</p>
  
  <pre><code>...
  &lt;button (click)="sendInfo(a,b,c)" &gt; &lt;/button&gt;
  ...
  </code></pre>
  
  <p>B.html</p>
  
  <pre><code>...
  &lt;div *ngIf="showData" &gt; {{loadData()}} &lt;/div&gt; 
  ...
  </code></pre>
  
  <p>A.component.ts</p>
  
  <pre><code>...
  showData = false;
  sendInfo(a: string, b:string, c:string) {
  //calling webservice
  showData = true;
  }
  ...
  </code></pre>
  
  <p>B.component.ts</p>
  
  <pre><code>...
  showData = false;
  //when button from A.html clicked
  showData = true;
  </code></pre>
  
  <p>So in B.component.ts I want to set the showData to true if the button from A.html is clicked. </p>
  
  <ol>
  <li><p>How does B.component.ts know when A.component.ts has been changed?</p></li>
  <li><p>How do I set this shared variable between two component?</p></li>
  </ol>