The TRUE difference between [] and {{}} bindings in Angular
One of the parts of Angular that most developers think they understand, but many don’t, is the true nature of [] and {{}} bindings. A fundamental lack of understanding of these bindings can become a major issue when working with templates and trying to get them to do exactly what you want. It can also be the cause of spending an unnecessary amount of hours trying to figure out a bug. So I’m going to run down exactly what these two bindings do, and what it is that many developers misunderstand about them. You’re probably familiar with the typical usage of {{}} bindings: <h1>{{title}}</h1> And you’re probably familiar with the typical usage of [] or property bindings: <img [src]="imgsrc"> But do you truly understand what each binding is doing? And why we use them in this situation? Many if not most developers simply know to use {{}} when putting text in an element, and [] for binding to properties. But have you ever wondered with reactive forms why the form...