Style HTML elements in Angular using ngStyle
We will learn how to make use of the ngStyle directive to directly add multiple style attributes to a DOM element as a style property. We’ll also learn how we can make these styles more dynamic through user input.
[00:01] Often when we want to style our HTML elements within our components, rather than adding CSS classes, we want to apply our styles directly. Now, since this is valid HTML, we can definitely do that. For instance, let's add some border around our div here.
[00:18] As you can see, this perfectly works. However, if we want to make this a bit more dynamic, what we can do instead is to use the ngStyle directive. Here, we can reference an object. Let's call it, for instance, border style, which is a property which we have to define in our component class.
[00:43] Inside that border style again, we can then define our properties, like one pixel, solid black for the border. It's got some border radius of, let's say, three pixels. Let's also add some width of 200 pixels and some padding.
[01:09] If you save this, you can see how it gets applied, because this object inside here gets bound to that ngStyle, which then, if we inspect the HTML code here, directly applies those styles as a style property on the div element.
[01:25] So far, this is pretty simple, but obviously, we want to add some more dynamic behavior. For instance, add some width, which is steered by some user input. To do that, let's add here a p, and let's add here some input field of type text, and a button that allows us to set that.
[01:53] Inside that input field, let's give it a name. Let's call it boxwidth. Now, whenever we click on that button, we want to invoke a method that says updateStyle. We use that boxwidth.value, which we pass into that method.
[02:12] Obviously, we have to define that method in our component. It takes the width as a parameter. Now, inside here, we simply reference .borderstyle, we use .width, and then we basically associate the width which we get from the input field.
[02:31] Now, obviously, we have to concatenate this, because here, we get a string value, and we need to add .pixels as a suffix, which is the unit. We can here use this syntax, and then concatenate both values. Now, when we add here 100 and say set, we can see how the box nicely reshapes.
[02:52] Now, obviously, concatenating these values down here is not really nice. What the ngStyle allows us to do is to specify the kind of of unit which we want to use directly after the property by using the dot notation. In this case, we can simply drop the pixels suffix here and use a number, which is much more convenient.
[03:15] Obviously, we have to use the quotes here, because again, this wouldn't be a valid JavaScript property. Also, here, we have to use the bracket notation for accessing .value. Now, we can change this one here, because it is now a number that gets passed to the border style. Again, if we add here 100, it nicely reshapes.