AngularJS Add Class Dynamically
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Ashish
In this tutorial we will show you the solution of angularjs add class dynamically, here we needs to create block of style for particular class then we are going to adding that class to any HTML element which one is suitable for that style is need to consider.
As we know using directives we can do anything in angularjs so here we used ‘ng-class’ directive for dynamically adding class to span element with some content.
Step By Step Guide On AngularJS Add Class Dynamically :-
Here using ‘ng-class’ we can add class to span element. Ng-class directive dynamically binds one or more CSS classes to an HTML element.
The value of the ng-class directive can be a string, an object, or an array.
If it’s a string, it should contain one or more, space-separated class names.
If an object means it contain key-value pairs, or an array means it combination of both. In our program we used key pair values.
Using that our key is ‘edit’ and value is Boolean value we set it to ‘true’ then only we can added to element span because the value when becomes true it will apply all styles to span element.
<!DOCTYPE html>
<html>
<head>
<title>Add class dynamically</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<style>
.edit{
color: green;
font-size: 1rem;
}
</style>
</head>
<body>
<div ng-app="">
<input type="button" ng-click="edit=true" value="style">
<input type="button" ng-click="edit=false" value="reset">
<br><br>
<span ng-class="{true:'edit'}[edit]">Hello World!</span>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- In <style> tag we described style for change font color to ‘green’ and font size becomes ‘2 rem’. Those styles defined for class ‘edit’ and as we know ‘.’ Denotes class ‘#’ denotes id in CSS.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
- In <div> tag we declared our ng-app as empty it defines our application and within that we defined to buttons for adding class and remove.
- First button is ‘style’ when user clicks on that its ‘ng-click’ value to ‘edit=true’ so enables class ‘edit’ then we added those styles on <span> element text. So text ‘Hello World!’ color becomes green and size also increased.
- Next button is ‘reset’ when user clicks on that its ‘ng-click’ value to ‘edit=false’ so disables class ‘edit’ so added those styles on <span> element text will removed.
- Using <span> element we just printed one line ‘Hello World!’ to the webpage browser.
- Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to use if condition using angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
In our program when user clicks on ‘style’ button span element text color and size changed then when user clicks on ‘reset’ it will return to normal state those result we can see at webpage browser.
I hope this tutorial on angularjs add class dynamically helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
