[00:00] In this lesson, we are going to talk about dynamically changing the style class applied to a component. I have a label here, and this label has no stylistic properties applied to it. And I have a style class called Alarm. I only want this Alarm style class to be applied to my component when this tag AlarmBit is set to true, indicating that there is some sort of an alarm going on. Now, there are many different ways that we can approach this. But what we're going to do in this video, is use a binding and a transform to determine what style class is applied based on that AlarmBit. So we're going to go to My Label, make sure it's selected, and set up a binding on the style classes property. Now we want this binding to be based on the value of the tags, so I'm going to choose a Tag Binding type, and set the binding to be looking at my AlarmBit tag. Now, while this Tag Binding by itself is a valid binding, it's not going to give us the value that we're looking for. The style class property is expecting the name of one of my style classes as a string. And right now we're going to be returning either true or false based on the value of the tag. So we can use a transform to change the value that is being returned from the tag into the value that we're looking for. In this case, we're going to use a Map Transformation going from one input of either true or false to an output of the name of our style class. We have two possible inputs, either a true or a false value. So I'm going to go ahead and add two new rows to my mapping table here. I'll go ahead and type in our two input values. First, the value of false and hit enter to apply it. And then the value of true. Again, hitting enter to apply it. Now again, the output value simply need to be the name of a style class. So for the true input, I want to apply the Alarm style class. So I'm going to type in the name of that style class exactly as it appears, including that capital A and then hit enter. You'll notice that quotation marks automatically appeared around the style class name. This is because it does need to be a string. Now for the false value, I don't want to apply a style class, but rather than leaving this blank, which will return a no, I simply want to return an empty string. To do that, we can do something similar to what we did for the true output value, simply double clicking in here, but rather than typing in a style class name, I'm simply going to hit enter, and not type anything in. This will put an empty string into the property rather than a null. It's also always a good idea to set a fallback value, and my fallback is also going to be no style class applied. So I'm going to do the same thing that we did for the false output, just an empty string. Now that we have that set up, we can go ahead and hit Okay. And you can see that we now have a binding on the classes property. Remember it is based on the value of the tag, so I'm going to go ahead and set my tag value to true. And you can see that my Alarm style class gets applied to this component. Now I do have a second style class, this one called Border. And let's say I want to apply both of these when the AlarmBit is true, rather than just the Alarm style class. Let's take a look at how we would handle that in our mapping transform. When applying multiple style classes to a component, we simply need to list all of them out and separate them with a space. So for my true input, I'm going to go to the output value and simply add in the name of my Border style class right next to the Alarm style class, separated by a space. You'll notice it's still within the quotation marks. And I do need to remember to hit enter to apply that. Once I have that I can hit Okay, and you can see that now both the Alarm style class and the Border style class are applied.