title: Angular 4 How to Share variables
body: <p>I am loading app component first and based on routing loading other pages.</p>
  
  <p>After Loading first page, I wanna share app component variable to search component. Both are loading on first page. How can I do this?</p>
  
  <pre><code>change(lan) {
    // I wanna send this lan variable to search component,   
    // this time search component loaded already in routing
  }
  </code></pre>
  
  <p>The flow is like this:</p>
  
  <p>First time search component and app component are loaded.</p>
  
  <p>After that I will change a variable.</p>
  
  <p>That should available for me in search component.</p>
  
  <p><code>HTML</code></p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;div class="height-40 col-xs-12 bgcolor-EF bottom-panel"&gt;
      &lt;a href="javascript:void(0);" (click)="change('en')"&gt;English&lt;/a&gt; | &lt;a href="javascript:void(0);" (click)="change('pa')"&gt;Español&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>TS</code></p>
  
  <pre><code>change(lan) {
  
  }
  </code></pre>
  
  <p>How to retrieve in Search component?</p>