title: Angular 2 changing component variables on another component
body: <p>How can a component change a variable on another component. Example:</p>
  
  <p>I have a component <code>app.component.ts</code></p>
  
  <pre><code>@Component({
      selector: 'my-app',
      template: `
      &lt;nav *ngIf="onMain == false"&gt;
         Hello
      &lt;/nav&gt;
      `
  })
  
  export class AppComponent{
    onMain: Boolean;
  
    constructor(){
        this.onMain = false;
      }
  }
  </code></pre>
  
  <p>I have another component which I want to change onMain in my app component <code>main.component.ts</code></p>
  
  <pre><code>import {AppComponent} from '../app.component';
  
  @Component({
      selector: 'main-app',
      template: ``
  })
  
  export class MainComponent{
  
    constructor() {
        this.appComponent = AppComponent;
        this.appComponent.onMain = true;
      }
  }
  </code></pre>
  
  <p>I would expect that Hello would disappear, but it doesn't. How can I have one component change the value on another component?</p>