One of my Angular2 projects features a simple form:
Form.ts
import {Component, Input} from 'angular2/core'
@Component({
selector: 'my-form',
providers: [],
template: `
<form>
{{ data }}
<input type="text" placeholder="name" />
<input *ngIf="data" type="text" placeholder="details" />
</form>
`,
directives: []
})
export class MyForm {
@Input() data: boolean;
constructor() {
}
}
Referencing this Plunkr example, I noticed that toggling the data @input via the button changes the text between true and false effortlessly.
However, the *ngIf directive doesn't seem to toggle the textfield as expected.
Any suggestions on what might be missing here?
App.ts
import {Component} from 'angular2/core'
import {MyForm} from './form'
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<button (click)="toggle()">toggle details</button>
<my-form data="{{visible}}"></my-form>
</div>
`,
directives: [MyForm]
})
export class App {
visible: boolean = false;
constructor() {
this.name = 'Angular2'
}
toggle() {
this.visible = !this.visible;
}
}