Post
Ask Question

Change Style Dynamically in Various Ways Using AngularJS

Introduction

This article explains how to change the style dynamically in various ways using AngularJS.

AngularJS provides three different ways to change the style dynamically. People always search for methods to change their style dynamically, AngularJS can solve their problems in any of three ways.

Step 1. First of all, you need to add an external Angular.js file to your application, you can go to the AngularJS official site or download my source code and then fetch it or you can click on this link to download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application as in the following.

<head runat="server">
    <title></title>
    <script src="angular.min.js"></script>
</head>

Step 2. Now I will create some simple CSS classes to be applied dynamically, or you can say at runtime.

<style>
    .changeColor {
        color: blue;
    }
    .changeSize {
        font-size: 30px;
    }
    .italic {
        font-style: italic;
    }
</style>

Here I have created three classes, namely changeColor, changeSize, and italic. The first CSS Class is used for changing the color of the text to Blue, the second is for changing the text size and the last one is for making the Text Italic.

Now we have created the classes to be applied, we need to work on the ViewModel or design part of our application where simple coding needs to be done to apply the change in CSS.

First Method

In the first method, objects of the classes are created that are called using the ng-model, let's see this by implementing it in our application as in the following.

<p ng-class="{changeColor: Color, changeSize: Size, italic: Italic}">
    Changes Will be Seen in Me
</p>
<input type="checkbox" ng-model="Color"> Change Color (apply "changeColor" class)<br>
<input type="checkbox" ng-model="Size"> Change Size (apply "changeSize" class)<br>
<input type="checkbox" ng-model="Italic"> Make it Italic (apply "italic" class)

Here I have applied the CSS to a <p> Tag, and classes are applied using the ng-class directive, here in the ng-class you can see that I have created an object of each class such as for changeColor, "Color" is created.

After this I applied the binding using the ng-model, I created three checkboxes and in each checkbox ng-model is applied, each ng-model provides the binding using the objects created in the ng-class.

So, If we check the first checkbox then the color of the text will change to Blue, similarly, if we check the second and third checkboxes then the text size and its style will change.

Let's see the output.

Output

As I run the application and check the checkboxes then this type of output will be seen.

CSS Dynamically

Second Method

Now, I will show you the Second Method of applying the CSS dynamically.

In this method, class names will be called to Apply the CSS.

<p ng-class="style">I Will Show Second Method</p>
<input type="text" ng-model="style" placeholder="Type: changeSize changeColor italic">

Here you can see that in the ng-class I have passed the complete style, since I have passed the style in ng-class it will call all the classes that are created in that style.

Then I created a TextBox to which the style is bound using the ng-model, whatever name is provided in the TextBox, the same style will be applied to the text provided through the <p> tag. If the the name provided in the TextBox doesn't match the CSS Class than nothing will happen to the text and nothing will be applied.

Let's see the output.

Output

Output

Third Method

Now, I will show you the Third Method for applying the CSS dynamically.

In this method, CSS classes will be called in the order they were created.

<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: changeSize, changeColor or italic"><br>
<input ng-model="style2" placeholder="Type: changeSize, changeColor or italic"><br>
<input ng-model="style3" placeholder="Type: changeSize, changeColor or italic"><br>

Here you can see that I have applied the CSS to the <p> tag using the ng-class but this time I have called the classes by the order they were created, style1 is automatically bound to the first class, similarly style2 and style3 are bound to the second and third class.

Then I created three Textboxes that are bound to style 1, 2, and 3 separately, whatever CSS name is provided in these textboxes, the same CSS class will be applied to the Text provided in the <p> tag.

Let's see the output.

Output

Localhost

The complete code of this application is as follows.

<html ng-app xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
    <script src="angular.min.js"></script>
    <style>
        .changeColor {
            color: blue;
        }
        .changeSize {
            font-size: 30px;
        }
        .italic {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p ng-class="{changeColor: Color, changeSize: Size, italic: Italic}">Changes Will be Seen in Me</p>
    <input type="checkbox" ng-model="Color"> Change Color (apply "changeColor" class)<br>
    <input type="checkbox" ng-model="Size"> Change Size (apply "changeSize" class)<br>
    <input type="checkbox" ng-model="Italic"> Make it Italic (apply "italic" class)
    <hr>
    <p ng-class="style">I Will Show Second Method</p>
    <input type="text" ng-model="style" placeholder="Type: changeSize changeColor italic">
    <hr>
    <p ng-class="[stle1, stle2, stle3]">I Will Show Third Method</p>
    <input ng-model="stle1" placeholder="Type: changeSize, changeColor or italic"><br>
    <input ng-model="stle2" placeholder="Type: changeSize, changeColor or italic"><br>
    <input ng-model="stle3" placeholder="Type: changeSize, changeColor or italic"><br>
</body>
</html>


Similar Articles