Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Ray Camden and Todd Sharp and Joe Rinehart
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Ray Camden@cfjedimaster ) , Todd Sharp@cfsilence ) , and Joe Rinehart@joeRinehart )

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!




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.

Reply to this Comment

@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

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.