Angular2 - двухсторонняя привязка данных к свойству переменной компонента / класса компонента?

В Angular2 (Beta 6) у меня есть компонент для главного меню.

<mainmenu></mainmenu>

Я хочу привязать логическое значение к широкому или узкому. Итак, я сделал это:

<mainmenu [(menuvisible)]="true"></mainmenu>

Но я хочу (я думаю) привязаться к свойству класса javascript (поскольку у меня могут быть другие вещи, которые нужно привязать, но я хочу быть аккуратным, используя один класс в компоненте).

Я получаю ошибку

ИСКЛЮЧЕНИЕ: ошибки синтаксического анализа шаблона: недопустимое имя свойства 'menumodel.visible' ("

] [(menumodel.visible)] = "menumodel.visible">

Если я попробую то же самое с одной переменной вместо класса, я получу:

Ошибки синтаксического анализа шаблона: ошибка синтаксического анализатора: неожиданный токен '='

Однако это (односторонняя привязка?), Похоже, работает (но я мог бы захотеть, чтобы меню расширялось / сужалось от другого компонента, поэтому я чувствовал, что это должно быть свойство с двусторонней привязкой данных):

<menu [vis]="true"></menu>

Это часть моего компонента меню:

@Component({
    selector: 'menu',
    templateUrl: './app/menu.html',
    providers: [HTTP_PROVIDERS, ApplicationService],
    directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgForm]
})
export class MenuComponent implements OnInit {

    mainmenu: MainMenuVM;

    constructor(private _applicationService: ApplicationService) {
        this.mainmenu = new MainMenuVM();
    }

    // ...ngOnInit, various functions

}

Вот мой класс модели просмотра MainMenu

export class MainMenuVM {
    public visible: boolean;
    constructor(
    ) { this.visible = true; }
}

Я пытаюсь создать меню, в котором есть значки и текст, но можно сузить, чтобы просто отображать значки. Я отправлю это событие вверх родительскому компоненту, чтобы изменить положение контейнера рядом с меню. Запуск контейнера содержимого до максимума приведет к сужению меню - я не говорю, что это лучший способ, но я хотел бы решить этот конкретный вопрос, прежде чем углубляться.

Обратите внимание: здесь я не привязываю данные к элементу управления вводом, а просто привязываю данные к компоненту, чтобы затем можно было изменить пользовательский интерфейс.

Это из шпаргалки по Angular

<my-cmp [(title)]="name">   
Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

Заранее спасибо!

ОБНОВЛЕНИЕ

Интегрируя код из принятого ответа и адаптируя для моего конкретного случая использования здесь окончательный рабочий код:

app.html

...header html content

// This is what I started with
<!--<menu [menuvisible]="true" (menuvisibleChange)="menuvisible=$event"></menu>-->

// This is two way data binding
// 1. Banana-in-a-box is the input parameter
// 2. Banana-in-a-box is also the output parameter name (Angular appends it's usage with Change in code - to follow shortly)
// 3. Banana-in-a-box is the short hand way to declare the commented out code
// 4. First parameter (BIAB) refers to the child component, the second refers the variable it will store the result into.
// 5. If you just need an input use the remmed out code with just the first attribute / value
<menu [(menuvisible)]="menuvisible"></menu>

.. div content start 
<router-outlet></router-outlet>
.. div content end 

app.component.ts (корневой)

export class AppComponent implements OnInit{
   menuvisible: Boolean;
}

menu.component.ts (дочерний элемент root)

export class MenuComponent implements OnInit {
    // Parameters - notice the appending of "Change"
    @Input() menuvisible: boolean;
    @Output() menuvisibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();

    // Init
    ngOnInit() {
        // Populate menu - fetch application list       
        this.getApplications();

        // Initially we want to show/hide the menu depending on the input parameter
        (this.menuvisible === true) ? this.showMenu() : this.hideMenu();
    }

    //...more code
}

menu.html

<div id="menu" [ngClass]="menuStateClass" style="position: absolute; top:0px; left: 0px;z-index: 800; height: 100%; color: #fff; background-color: #282d32">
    <div style="margin-top: 35px; padding: 5px 0px 5px 0px;">

        <ul class="menuList" style="overflow-x: hidden;">
            <li>IsMenuVisible:{{menuvisible}}</li>
            <li style="border-bottom: 1px solid #3d4247"><a (click)="toggleMenu()"><i class="fa fa-bars menuIcon" style="color: white; font-size: 16px;"></i></a></li>
            <li *ngFor="#app of applications">
                <a [routerLink]="[app.routerLink]">
                    <i class="menuIcon" [ngClass]="app.icon" [style.color]="app.iconColour" style="color: white;"></i>
                    <span [hidden]="menuStateTextHidden">{{ app.name }}</span>
                </a>
            </li>
        </ul>

    </div>
</div>

Не забудьте импортировать то, что вам нужно, например

import {Component, EventEmitter, OnInit, Input, Output} из angular2 / core;

Настоятельно рекомендую это видео на YouTube: Учебник по Angular 2 (2016 г.) - Входы и выходы