4.5 Class and Style Bindings

Hi folks. In this lesson, we are going to look at the style and class bindings. We can use these bindings to add and remove class names, or inline styles on elements. These are like specialized property bindings for working exclusively with class and style properties. And Angular provides these, because these are such common requirements. Let's take a look at class bindings first. In the template for the start component, there's a custom check box. It doesn't currently work, but we can fix it up with some help from the class binding. So we have this span here for our custom check box. And what we want to do is link the checked property to a value in the component class. So we still use square bracket syntax for the class binding, and as I said, that's because the class binding is a specialized property binding. So this time we prefixed the class name that we would like to add with the word class. So the binding becomes class.checked, because we want to add a class called checked, and we link that to a property in our component called Aces High. So whenever this property evaluates to true, this element will get the checked class. And when the property evaluates to false, the class will be removed. And we're also going to want to bind to the click event. So let's add that, at this point, as well. So let's open up the component class now. So we don't have either an aces high property, or a toggle aces method. So we're gonna need to add both of those. So all the toggle aces method does is flip the value of the aces high property. So if this property starts out as true, calling this method will set it to false. But if the property is already false, calling the method will set the property to true. So we haven't initialized the aces high property, and so its value will initially be undefined, which evaluates to false, so aces will not be high by default. So let's go back to the browser now. And we should find that we should be able to click the check box, and it will add the checked class. And it looks like it's working, let's just take a look at the elements. So we can see it currently has the checked class, and that class gets removed. But it doesn't affect any other classes that the element might have, it already has this check box class, and that remains whether or not the checked class is present. So the class binding is useful for adding or removing a single class name. There is also another form that the binding can take, instead of toggling a single class, we can overwrite the whole class property. So this time it breaks everything, because it starts out with a class name undefined, and that is not what we want. So I just wanted to point out that this is available, but it works in a slightly different way. So if you really want to set one class, then using the class.class name format is a safer option. We can still only add a single class if we use just class by itself. It just overrides other classes. So you'll find that this version is the most common. The style binding works in a very similar way to the class binding. Let's say we wanted to set the color of one of the labels in the start component as an end line style. So, we still use square brackets for the style binding. And this time we use style., and then the name of the style that we want to set, which is this case is color. Liz had a method here called get color. And in this case, the method that we've just bound to will need to return the value that gets used as the color. So this binding can only set a single style property at a time, just like the class binding. One point to note is that when setting style properties that are usually hyphenated, is that we can use either a hyphen or camelcase. So, if we wanted to set the background color instead of the color, we could do either this. Or we could do this. There's no difference, it's really down to personal preference. So we don't actually want to do that for the label, I just wanted to show you the format of the binding. As you can see, it's very similar to other property bindings that we've used. But let's get rid of that. So in this lesson we looked at the class and style bindings. We saw that either of them can only set a single class name or a single inline style. But that the syntax used by the binding is almost identical to a regular property binding. We just specify either class.className or style.styleProperty. Thanks for watching.