Why Angular 2 or Angular 4 use banana brackets? Is there any specific reason for that? Why they won't follow same pattern as AngularJS?

I know, it is not related to any coding, but they can follow the same syntax as in AngularJS:

<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, would it be very helpful for people to adapt a change in Angular JS?

Similarly, for ng-repeat, they changed to ngFor.

AngulAR 2 and its Greater Version:

<ul ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</ul>

Angular 1:

<ul ng-repeat="item in items track by myTrackingFunction(n)">
<li>...</li>
</ul>

Why Angular 2 or Angular 4 use banana brackets? Is there any specific reason for that? Why they won't follow same pattern as AngularJS?

I know, it is not related to any coding, but they can follow the same syntax as in AngularJS:

<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, would it be very helpful for people to adapt a change in Angular JS?

Similarly, for ng-repeat, they changed to ngFor.

AngulAR 2 and its Greater Version:

<ul ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</ul>

Angular 1:

<ul ng-repeat="item in items track by myTrackingFunction(n)">
<li>...</li>
</ul>

• javascript
• angular
• angularjs
• typescript
• syntax

• read binding syntax – Suraj Rao Commented Apr 25, 2017 at 10:20
• If I understand you correctly you are asking to port this way of data-binding back to AngularJS? AngularJS and Angular have different ways of handling HTML. In AngularJS, the HTML had to be accepted by the browser. In Angular, the HTML templates will be pre-processed before going to the browser. You can check yourself with the browser dev tools of your choice – devnull69 Commented Apr 25, 2017 at 10:41

3 Answers 3

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 bining them to achieve two way data binding for ngModel.

Setters [] can lead you to have one way binding.

Angular (2,4+) is a plete rewrite of angular1 as angular has adopted typescript as it's base language and it is pletely 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 bines 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