title: Connection between two Angular 2 components view not updating
body: <p>I've got a slight variation on the question posted here: <a href="https://stackoverflow.com/questions/36154446/angular2-component-view-does-not-update-on-value-change-via-method">Angular2 component view does not update on value change via method</a>.</p>
  
  <p>I want to switch a variable on the <code>modal component</code> from the <code>toggle buttons component</code> but the view is not updated.</p>
  
  <p>How can I make the modal view update when I click the toggle button?</p>
  
  <p>See for reference: <a href="https://plnkr.co/edit/9KJdnxk1DKF6ngxreJmV" rel="nofollow noreferrer">plunkr</a></p>
  
  <p><strong>app.ts</strong></p>
  
  <pre><code>//our root app component
  import {Component, ViewChild} from 'angular2/core';
  import {Modal} from './modal';
  import {ToggleButtons} from './togglebuttons';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
  
         &lt;toggle-buttons&gt;&lt;/toggle-buttons&gt;
  
         &lt;modal&gt;&lt;/modal&gt;
  
      &lt;/div&gt;
    `,
    providers: [Modal, ToggleButtons, ],
  })
  export class App {
    constructor() {
  
    }
  }
  </code></pre>
  
  <p><strong>togglebuttons.ts</strong></p>
  
  <pre><code>//our root app component
  import {Component} from 'angular2/core';
  import {Modal} from './modal';
  
  @Component({
    selector: 'toggle-buttons',
    template: `
      &lt;div&gt;
  
        &lt;button (click)="toggle()"&gt;toggle&lt;/button&gt;
  
        &lt;button (click)="showActivate()"&gt;print&lt;/button&gt;
  
      &lt;/div&gt;
    `
  })
  export class ToggleButtons {
    constructor(private modal: Modal) {
  
    }
  
    showActivate() {
      this.modal.showActivate();
    }
  
    toggle() {
      this.modal.toggleActivate();
    }
  }
  </code></pre>
  
  <p><strong>modal.ts</strong></p>
  
  <pre><code>//our root app component
  import {Component, Injectable} from 'angular2/core'
  
  @Component({
    selector: 'modal',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Modal: {{activate}}&lt;/h2&gt;
      &lt;/div&gt;
    `,
    directives: []
  })
  
  export class Modal {
  
    activate: true;
  
    constructor() {
      this.activate = false;
    }
  
    showActivate() {
      console.log('Modal:showActivate', this.activate);
    }
  
    toggleActivate() {
      this.activate = !this.activate;
      console.log('Modal:toggleActivate', this.activate);
  
      console.log(this.activate)
    }
  }
  </code></pre>