Property binding - lordoftheflies/angular-essential-training GitHub Wiki

Another way you can bind data in templates with Angular is through property binding. HTML elements have backing DOM properties that track state on elements. You can use Angular's property binding syntax to wire into those properties. You do this with a specific syntax, a pair of square brackets around a property name on an element. And you set these equal to a template expression, following the same rules as you do for interpolation. So in the media-item.component.html file, let's add a textContent property to the h tag which is a native DOM property for tracking textContent in an element. Then we surround it with square brackets and set it equal to the name expression context property. Now we can remove the interpolation statement from within the h tag. And when we switch over to the browser, we see we have the same result. Using the property binding syntax of the square brackets tells Angular that you want it to evaluate an expression for that property. If we leave off the brackets and switch back to the browser to see the reloaded results, we see that nothing gets rendered. This is because Angular is not evaluating the quoted value as an expression. But if we put the interpolation curly braces around the property name, then back in the browser, we can see that Angular will process it. And actually, Angular will translate the interpolation approach into the same property binding that the previous syntax did. So we can do property binding either way. Let's go back to the media-item.component.html file and do a little clean up. We will remove textContent from the h tag as we won't be needing it going forward. And the same for the wasWatched content.