Playing with Fire(base) – Three Way Data Binding

I’ve been playing with Angular and Firebase over the last few days. But it sounds better the other way round. I remember one of my school teachers getting angry with some other kid being naughty and shouting “you are playing with fire!”. Except the teacher was German so it was “you are playing wiz fire!”. We used to shout that at each other for a while after that. Kids, eh?

Anyway, one of the core principles in Angular is two-way data binding between the model and the view (in your MVC structure). The user changes the data in the view, it gets changed in the model. Some code changes the data in the model, it gets changed in the view. It’s pretty neat in practice and makes pages feel really dynamic as you interact with them.

So that’s two-way data binding but what if you could go another layer down and bind that to your database as well and have all three update whenever any one of them is changed? Well that’s what Firebase allows you to do through the AngularFire library. You just bind your model to a Firebase object and you get this:

three way data binding

(Normal Angular data binding is the bit within the browser window frame)

…click here to read the rest…