Angular2 form field does not toggle on @input variable
<p>In Angular2 I have a very simple form:</p>

<p><strong>Form.ts</strong></p>

<pre><code>import {Component, Input} from 'angular2/core'

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

      {{ details }}

      &lt;input type="text" placeholder="name" /&gt;
      &lt;input *ngIf="details" type="text" placeholder="details" /&gt;
    &lt;/form&gt;
  `,
  directives: []
})
export class MyForm {

  @Input() details: bool;

  constructor() {

  }
}
</code></pre>

<p>As shown in this <a href="https://plnkr.co/edit/GYYlpQtQkAV3II1QD5Uu?p=info" rel="nofollow">Plunkr</a>, when I toggle the <code>details</code> @input via the button, the text changes between true and false. </p>

<p>However the <code>*ngIf</code> isn't toggling the textfield at all.</p>

<p>Any thoughts on what I miss here?</p>

<p><strong>App.ts</strong></p>

<pre><code>import {Component} from 'angular2/core'
import {MyForm} from './form'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    &lt;div&gt;
      &lt;button (click)="toggle()"&gt;toggle details&lt;/button&gt;
      &lt;my-form details="{{visible}}"&gt;&lt;/my-form&gt;
    &lt;/div&gt;
  `,
  directives: [MyForm]
})
export class App {

  visible: boolean = false;

  constructor() {
    this.name = 'Angular2'
  }

  toggle() {
    this.visible = !this.visible;
  }
}
</code></pre>