4.2 Property Bindings

Hi folks, in this lesson we're going to take a look at how we can bind to the properties of HTML elements in our templates. Property bindings are similar to simple interpolation in that they represent a one way transfer of data. Property bindings can only set an element or component's properties, we can't use them to read data from an element. So let's see some property binding in action. A common use case is disabling or enabling a button based on the value of some property in the component class. In the start component, we do have a button. So let's add a property binding for the button's disabled property. We use square brackets around the name of the property that we want to bind to. And in this case we can specify a property of the component, and that is called disable button. The component doesn't currently have this property, so let's go and add it. So we specify it as a public property. Remember that if you want to use a property of your component class in the template, it must be public. And we set the type to be Boolean. So let's just go back to the browser quickly. So because the property doesn't evaluate to true, the button is not yet disabled. But now in the ngOnInit, let's just set that to true. And let's go back to the browser now. And we can see that because the property does evaluate to true, the button is now disabled. If the value in the component changes at all, that change will be reflected in the UI. So we've used a settimeout here, which will change the value of the disable button property to false after one second. So now after one second the button becomes enabled again. We aren't restricted to Boolean values either, we combined two string values and use a more complex expression in the template. So let's delete that settimeout that we just added. And let's change the property to be a string value instead of a Boolean. And now we'll need to update where we set the value in the ngOnInit, which is just giving me a LIM warning. So now we can test for the value of the string in the template. So now we're saying, if the value of the disable button is equal to the string yes, then the button should be disabled. So if we go back to the browser at this point, we find that the button is disabled. So this works just as well but just as with interpolation, it's best to keep the logic in the component class where it can be tested instead of in the template here. In this case it's not too bad, but when we start to get lots of and or or conditions, it can become very hard to read. Let's put it back to how it was cuz I think that was actually preferable. Another common use for a property binding is binding to an element's hidden property, which is used to show or hide the component. We can use this with elements and we can also use it with other components as well. So let's say that we want to hide the game and end components to begin with. We can add a property binding for these in the home component. And now we just need to add the properties to the home component class. So by default in type script, a property that doesn't have an access modifier, like this one, title, will automatically be public. But I prefer to explicitly state whether properties are public or private. And I just think it makes the class more readable, especially when you've got lots of properties. And some of them are public and some of them are private or there might be a few protected ones in there as well. If you've just got some random ones here that don't have any access modifier at all, then it just makes it less readable, personally I find that. You might not think the same, but I'm just gonna add the public keyword before this existing types of property. And now we can add a couple more properties for the property bindings that we've just added in the template. So let's save that and now let's go back to the browser. And we find that the entire game and end components have been completely hidden. Even though they're not actually html elements, we can still use the hidden property binding with them. And just to reiterate, we use square brackets around the property that we would like to bind to. In this case, that's the hidden property that's on the left-hand side of the expression. And on the right-hand side of the expression, following the equals sign, is the property that we are binding to. So one point to note is that the square bracket syntax that we've used in this lesson is only for element properties, not element attributes. Attributes and properties are conceptually similar, and sometimes elements can have both a property and an attribute with the same name. And whose values are kept in sync automatically by the browser. The difference between them is that HTML defines attributes while the dom defines properties. Angular has a separate syntax for attribute binding which we look at in another lesson. So in this lesson we've learned about property binding, which allows us to bind properties of our components or the elements within our components to properties in our classes. We saw that we use square brackets around the property that we want to bind to, followed by an expression within double quotes. Which Angular will evaluate and update the binding with the appropriate value. Thanks for watching.