Angular2 - two way databinding on a component variable / component class property?
<p>In Angular2 (Beta 6) I have a component for a main menu.</p>

<pre><code>&lt;mainmenu&gt;&lt;/mainmenu&gt;
</code></pre>

<p>I want to bind a boolean for wide or narrow.  So I made it into this:</p>

<pre><code>&lt;mainmenu [(menuvisible)]="true"&gt;&lt;/mainmenu&gt;
</code></pre>

<p>But what I want (I think) is to bind to a javascript class property (as I may have other things to bind but want to be tidy by using a single class in the component).
</p>

<p>I get an error</p>

<blockquote>
  <p>EXCEPTION: Template parse errors: Invalid property name
  'menumodel.visible' (" </p>
  
  <p>][(menumodel.visible)]="menumodel.visible"></p>
</blockquote>

<p>If I try the same with a single variable instead of a class I get:</p>

<blockquote>
  <p>Template parse errors: Parser Error: Unexpected token '='</p>
</blockquote>

<p>However this (one way binding?) does seem to work (but I might want to trigger the menu to go wide/narrow from another component so felt this should be a two-way data bound property):</p>

<pre><code>&lt;menu [vis]="true"&gt;&lt;/menu&gt;
</code></pre>

<p>This is a bit of my menu component:</p>

<pre><code>@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

}
</code></pre>

<p>Here is my MainMenu View Model class </p>

<pre><code>export class MainMenuVM {
    public visible: boolean;
    constructor(
    ) { this.visible = true; }
}
</code></pre>

<p>I'm trying to create a menu which has icons and text, but can go narrow to just show icons.  I will emit this event upwards to a parent component to alter the position of the container next to the menu.  Triggering a content container to maximised will trigger the menu to go narrow - I am not saying this is the best way, but I would like to resolve this particular question before going deeper.</p>

<p>Please note: I am not databinding to an input control here - just databinding to a component so I can then modify the UI.</p>

<p>This is from the Angular cheatsheet</p>

<pre><code>&lt;my-cmp [(title)]="name"&gt;   
Sets up two-way data binding. Equivalent to: &lt;my-cmp [title]="name" (titleChange)="name=$event"&gt;
</code></pre>

<p>Thanks in advance!</p>

<p><strong>UPDATE</strong></p>

<p>Integrating the code from the accepted answer and adapting for my particular use case here the final working code:</p>

<p><strong><em>app.html</em></strong></p>

<pre><code>...header html content

// This is what I started with
&lt;!--&lt;menu [menuvisible]="true" (menuvisibleChange)="menuvisible=$event"&gt;&lt;/menu&gt;--&gt;

// 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
&lt;menu [(menuvisible)]="menuvisible"&gt;&lt;/menu&gt;

.. div content start 
&lt;router-outlet&gt;&lt;/router-outlet&gt;
.. div content end 
</code></pre>

<p><strong><em>app.component.ts (root)</em></strong></p>

<pre><code>export class AppComponent implements OnInit{
   menuvisible: Boolean;
}
</code></pre>

<p><strong><em>menu.component.ts (child of root)</em></strong></p>

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

    // 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
}
</code></pre>

<p><strong><em>menu.html</em></strong></p>

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

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

    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Remember to import what you need e.g.</p>

<blockquote>
  <p>import {Component, EventEmitter, OnInit, Input, Output} from
  'angular2/core';</p>
</blockquote>

<p>Highly recommend this video on You Tube:
<a href="https://youtu.be/3ke5c6nzVC0?list=PL55RiY5tL51olfU2IEqr455EYLkrhmh3n">Angular 2 Tutorial (2016) - Inputs and Outputs</a></p>