Angular2 component view does not update on value change via method
<p>In Angular2 I am creating a modal window which needs to be toggled on and off. During the development I stumbled upon something weird:</p>

<p>When I change the <code>activate</code> variable inside my <code>Modal class</code> with an external button. The view is not updating.</p>

<p>Printing the <code>activate</code> variable in the console goes without any problem. I see the variable toggle between true and false.</p>

<p>It looks like I am missing code which forces the view to render with the new values.</p>

<p>Does anyone have an idea what I might be missing here?</p>

<p>The code below in a <a href="https://plnkr.co/edit/IMywtz6H8rkf4bvMQm2i?p=preview" rel="nofollow">Plunkr</a></p>

<p><strong>app.ts</strong></p>

<pre><code>import {Component} from 'angular2/core';
import {Modal} from './modal';

@Component({
  selector: 'my-app',
  providers: [Modal],
  template: `
    &lt;div&gt;

      &lt;button (click)="toggle()"&gt;toggle&lt;/button&gt;

      &lt;button (click)="showActivate()"&gt;print&lt;/button&gt;

      &lt;modal&gt;&lt;/modal&gt;

    &lt;/div&gt;
  `,
  directives: [Modal]
})
export class App {
  constructor(private modal: Modal) {

  }

  showActivate() {
    this.modal.showActivate();
  }

  toggle() {
    this.modal.toggleActivate();
  }
}
</code></pre>

<p><strong>modal.ts</strong></p>

<pre><code>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: []
})

@Injectable()
export class Modal {

  activate: true;

  constructor() {
    this.activate = false;
  }

  showActivate() {
    console.log('Modal:showActivate', this.activate);
  }

  toggleActivate() {
    console.log('Modal:toggleActivate', this.activate);
    this.activate = !this.activate;
  }

}
</code></pre>