I know its not related to any coding but they can follow the same syntax as in Angular 1
<input ng-model="hero.name" placeholder="name" type="text">
AngulAR 2 and its Greater Version Syntax till now
<input [(ngModel)]="hero.name" placeholder="name" type="text">
If they do so, it would be very helpful for people to adapt change in Angular JS ?
Similarly for ng-repeat, they changed to ngFor
<ul ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
<li>...</li>
</ul>
<ul ng-repeat="item in items track by myTrackingFunction(n)">
<li>...</li>
</ul>
The banana brackets are for double way binding.
See
Binding syntax:
Data binding is a mechanism for coordinating what users see, with application data values. While you could push values to and pull values from HTML, the application is easier to write, read, and maintain if you turn these chores over to a binding framework. You simply declare bindings between binding sources and target HTML elements and let the framework do the work.
Angular provides many kinds of data binding. This guide covers most of them, after a high-level view of Angular data binding and its syntax.
Binding types can be grouped into three categories distinguished by the direction of data flow: from the source-to-view, from view-to-source, and in the two-way sequence: view-to-source-to-view.
Banana Brackets... [()] that is a standard way of two way data-binding in angular. It is a getter and setter. [] setter while () for getter, so combining them to achieve two way data binding for ngModel.
Setters [] can lead you to have one way binding.
Angular (2,4+) is a complete rewrite of angular1 as angular has adopted typescript as it's base language and it is completely rewritten with typescript. Typescript has all the latest javascript's feature + types. Which can let you ensure about what type of data flow is in the logic.
But this doesn't stop user to use angularjs, anyone can use as it is also in development and they are trying to find easy way to migrate angularjs to angular.
Banana in a box it just a template syntax for Two-Way Data Binding and it combines the property binding and the event binding.
So instead of writing it explicitly:
<my-input [text]="val" (textChange)="val=$event"></my-input>
We can leverage the shortened syntax:
<my-input [(text)]="val"></my-input>
Why is it named “BANANA IN A BOX”? The naming assists us in remembering the order of the brackets of the Two-Way Data Binding.
[] = box
() = banana.
[()] = banana in a box 😃
Here is explanation.