Box binding flows from controller to view:
<button [disabled]="!form.valid">
Banana binding flows from view to controller:
<button (click)="frobulate()">
Banana-in-a-box binding goes both ways:
<input [(ngModel)]="fruit">
It is actually syntactic sugar for:
<input [ngModel]="fruit" (ngModelChange)="fruitChanged($event)">
…where Angular creates the change handler for you that updates this.fruit
in the controller. So when you want to enable two-way binding in custom components, you need a corresponding @Output() fooChange: EventEmitter
for every @Input() foo
.