A while back, I explained how to visualize the Angular compiler output to see what our code becomes in production.
Today, I want to answer a question I get very often when I teach Angular:
What’s the difference between these two syntaxes?
In other words, why use [] when {{ }} seems to work exactly the same?
Get Alain Chautard’s stories in your inbox
Join Medium for free to get updates from this writer.
If we compile that code, we get two different commands for each case:
// Property binding
property("value", ctx.title); // Interpolation
property("value", interpolate(ctx.title));
When we use curly braces {{ }}, Angular adds a call to the interpolate function, which is going to evaluate a JavaScript expression and return… a String! And that’s where the key difference lies:
- Interpolations with {{ }} are meant to evaluate some code and render it as text in our HTML
- Property bindings with [ ] bind an HTML property to a JavaScript variable, which can be anything (object, array, string, boolean, etc.)
As a result, [ ] and {{ }} are only interchangeable when working with a string (and possibly a number). If we want to bind something more complex, like an array or an object, then property bindings with [ ] are the only option.
Another way to put it is in a table:
My name is Alain Chautard. I am a Google Developer Expert in Angular and a consultant and trainer at Angular Training, where I help development teams learn and become proficient with Angular / React / JavaScript.
If you need any help learning web technologies, feel free to get in touch!
If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to my articles and YouTube video page.
