Style HTML elements in Angular using the style property
In this lesson we will take a look at how Angular makes use of the style property. This is a powerful concept that allows us to very easily add CSS styles onto HTML elements. These styles can even be easily made conditional.
[00:00] We can use the style property to add, for instance, some background color to our div here. Let's add some yellow. Great. Then, let's cut this out for a second and create here a getBackgroundColor function. We obviously also have to declare it here on our class.
[00:24] As a first step, let's see if we return our "yellow" string again. Then, let's create some variable, some showStyle toggle, and set it to false. In our getBackgroundColor function, we can then say something like, if this.show style, then let's return our "yellow" string. Otherwise, we return simply an empty string.
[00:50] To see this in action, we can simply add here a click listener, and we toggle our showStyle variable. By then clicking on the div, we can toggle our style.
[01:05] Now, obviously, this works for any kind of style. For instance, let's change the color of our font, and let's set it to red. You can see how this gets applied.