Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at dev.Objective() 2015 (Bloomington, MN) with: Stacy London
Ben Nadel at dev.Objective() 2015 (Bloomington, MN) with: Stacy London@stacylondoner )

Two-Way Data Binding Is Just A "Box Of Bananas" In Angular 2 Beta 1

By Ben Nadel on

Over the weekend, I listened to the latest Adventure in Angular podcast with Brad Green, Misko Hevery, and Igor Minar. In the podcast, the panelists brought up such a fantastic "visual cue" for the new Angular 2 syntax that I just had to share it. They referred to the two-way data binding syntax as a "box of bananas". This is so powerful because when you visualize the concept, you immediately understand how to properly write your two-way data binding attributes in your Angular 2 templates.

If you've ever tried to define your two-way data binding attributes like this:

<widget ([ngModel])="someValue"></widget>

... you'll get the mysterious AngularJS error:

EXCEPTION: No provider for NgModel! (WidgetController -> NgModel)

The problem here is that the parens "()" were outside the brackets "[]" when they should have been on the inside:

<widget [(ngModel)]="someValue"></widget>

As you can see, the order of the parentheses and the brackets were switched. And this works fine. But, you never need to make this mistake again if you just think about it like a "box of bananas":


 
 
 

 
Two-way data binding is just a 'Box of Bananas' in Angular 2.  
 
 
 

Awesome stuff!



Looking For A New Job?

Ooops, there are no jobs. Post one now for only $29 and own this real estate!

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

Error messages certainly need some work!

I have a strict linter which insists on double-quotes for all strings. I did a sloppy global replace single -> double and ended up with something like:

<div foo="func("bar")"></div>

in a template, which resulted in a massive stacktrace with NO CLUE WHATSOEVER as to the problem.

@Fergus,

Yeah, that stack traces are REALLY huge in Angular 2. And, I find that they often have the wrong line numbers completely. And, the first like 10 items in the stack trace seem to be Angular 2 internals, which makes it harder. Thankfully this is all still small-scale and I can hone my instincts for errors :P