And for that, we would need to create a small div like the one below: If we look at the above code, we can notice that we had to first get element by id, then assessing its class name, before we start changing the values, them using compact, e. We would both agree that this can be a very tedious method of dealing with just styles and class names. Angular makes many parts of development easier including styling.
Now, let's see how these are taken care of in Angular. First of all, this tutorial believes that you know: Once done, we change directory into our angular project and run ng serve. In Angular, there are two methods of passing styles into elements.
In the first instance, we can bind something like [style. This kind of styling would make the color of the element red. Similarly, we can also alter any style element that way by passing a string as the value.
However, to be more dynamic, we can pass a dynamic style using a variable that exists in the component. Let's take this for example. We have set a property called randomcolor as a variable that holds the background color, and we have immediately set it to the value of our random generator function. Next, we defined a random generator function, that randomly generates colours by splitting letters and making sure it returns a color format like ffffff Then we defined a setcolor function that sets the variable to another randomly generated color.
We have four main elements on the piece of code. The first one which prints out the value of value, The second, which is a header element, defining what we are doing. The third is the actual div in which we have attached a style binding to, While the fourth element, is the button, which has a click function that calls the setColor function from our component.
If we close the page and compile, we should see something like this: Using the [ngStyle] Binding Another Method using style is to use the [ngStyle] property directly, which allows us to pass objects into it. We added two properties into our app. These two properties are responsible for changing the style dynamically. Currently, they are just properties holding default values, and nothing special happens with them. We added some extra Html elements to the page.
A new header tag, to specify what we are doing, a new div with our ngStyle binding, with an object passed to it. One thing you might notice is that the object passed to it looks a lot like a CSS class. In fact, it is almost a CSS class, except that we pass in variables to it and also functions. Can you notice our getRandomColor function is being called here again to set the color. Not that it is compulsory, but rather than hard code the color, we decided to give it some spice.
We now have two new elements which are input buttons, with ngModel bindings to the variable declared in the style, for reactivity purposes. After adding this files and compiling, your page should look like this: Now let's look at what has changed: Although we set some default parameters, let's move into our app. We added a new div which is bonded using ng style, and we then passed an object to it.
The object consists of 3 properties which are style properties namely: The color attribute is set to a random color from our random color function, while both the background-color and font-size are preset.
Just after then, we find two inputs with ngModel binding to the font-size and color, which makes those fields reactive. So if i were to type 18px to the font-size box, i get text of about 18px, vis-a-vis if i am to type in orange to the background-color box, i get a background color of orange.
Using the [className] directive Let us start by using the [className] directive: However, let's go on and see what we would use them for later on. What have we done here? This is how what we have would look at now: But let us take a look at this example to see when using class name can be useful. Now let's add the following Html code: So what have we done here? We have used the class name attribute to specify our class, which is being toggled using the button provided.
Using the ngClass Binding Another class binding we can do is using the ngClass binding. We can use the ngclass to load classes dynamically too. Just like the class name, we can load the classes either by string, by an array or even by objects. The usage of object is the bigger advantage ngClass has over className e.
But lets take a look at the third option that uses an object. We are allowed to pass an object to the ngClass directive. The object contains a key of all the styles we want to load and a boolean value of either true or false. Let's Take a look at the example below: The two properties hold the default boolean value for both style1 and style2.
Now let's update our HTML structure to this: We also have two values that change the boolean value from false to true. So as we click, the classes change themselves. Now this is what our page should look like: I hope you now understand how easy it is to play around with ngStyle and ngClass to make your application more reactive. With this approach, you wouldn't need jQuery to do things like toggle and tabs. And it is a much cleaner approach.