Angular2 - two way databinding on a component variable / component class property?

Question

In Angular2 (Beta 6) I have a component for a main menu.

I want to bind a boolean for wide or narrow. So

Answer 1

For two-way binding you need something like:

@Component({
    selector: 'menu',
    template: `
toggle

`,
    // HTTP_PROVIDERS should now be imports: [HttpModule] in @NgModule()
    providers: [/*HTTP_PROVIDERS*/, ApplicationService],
    // This should now be added to declarations and imports in @NgModule()
    // imports: [RouterModule, CommonModule, FormsModule]
    directives: [/*ROUTER_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgForm*/]
})
export class MenuComponent implements OnInit {
    @Input() menuvisible:boolean;
    @Output() menuvisibleChange:EventEmitter = new EventEmitter();

    // toggleVisible() {
    //   this.menuvisible = !this.menuvisible;       
    //   this.menuvisibleChange.emit(this.menuvisible);
    // }
}

And use it like

@Component({
  selector: 'some-component',
  template: `

visible: {{menuVisibleInParent}}
`
  directives: [MenuComponent]
})
class SomeComponent {
  menuVisibleInParent: boolean;
}