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

For two-way binding you need something like:

@Component({    selector: 'menu',    template: `<button (click)="menuvisible = !menuvisible; menuvisibleChange.emit(menuvisible)">toggle</button><!-- or    <button (click)="toggleVisible()">toggle</button> -->`,    // 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<boolean> = new EventEmitter<boolean>();    // toggleVisible() {    //   this.menuvisible = !this.menuvisible;           //   this.menuvisibleChange.emit(this.menuvisible);    // }}

And use it like

@Component({  selector: 'some-component',  template: `<menu [(menuvisible)]="menuVisibleInParent"></menu><div>visible: {{menuVisibleInParent}}</div>`  directives: [MenuComponent]})class SomeComponent {  menuVisibleInParent: boolean;}

I've created a short plunkr.

ngModel Like Two-Way-Databinding for components

You have at least two possibilities to to create a two way databinding for components

V1: With ngModel Like Syntax, there you have to create a @Output property with the same name line the @Input property + "Change" at the end of the @Output property name

@Input() name : string;@Output() nameChange = new EventEmitter<string>(); 

with V1 you can now bind to the Child Component with the ngModel Syntax

[(name)]="firstname"

V2. Just create one @Input and @Output property with the naming you prefer

@Input() age : string;@Output() ageChanged = new EventEmitter<string>();

with V2 you have to create two attributes to get the two way databinding

[age]="alter" (ageChanged)="alter = $event"

Parent Component

import { Component } from '@angular/core';@Component({   selector: 'my-app',   template: `<p>V1 Parentvalue Name: "{{firstname}}"<br/><input [(ngModel)]="firstname" > <br/><br/>              V2 Parentvalue Age: "{{alter}}" <br/><input [(ngModel)]="alter"> <br/><br/>              <my-child [(name)]="firstname" [age]="alter" (ageChanged)="alter = $event"></my-child></p>`})export class AppComponent {     firstname = 'Angular';     alter = "18"; }

Child Component

import { Component, Input, Output, EventEmitter } from '@angular/core';@Component({   selector: 'my-child',   template: `<p>V1 Childvalue Name: "{{name}}"<br/><input [(ngModel)]="name" (keyup)="onNameChanged()"> <br/><br/>              <p>V2 Childvalue Age: "{{age}}"<br/><input [(ngModel)]="age"  (keyup)="onAgeChanged()"> <br/></p>` })export class ChildComponent {      @Input() name : string;     @Output() nameChange = new EventEmitter<string>();     @Input() age : string;     @Output() ageChanged = new EventEmitter<string>();     public onNameChanged() {         this.nameChange.emit(this.name);     }     public onAgeChanged() {         this.ageChanged.emit(this.age);     } }