Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
AngularJS – ng-style Directive
The ng-style Directive in AngularJS helps you to set the CSS style of an HTML element conditionally. If the condition evaluates to True, the style will be applied. The expression inside the ng-style directive must be an object. This is supported by all the HTML elements.
Syntax
<element ng-style="expression">..content..</element>
Example − ngStyle Directive
Create a file "ngStyle.html" in your Angular project directory and copy-paste the following code snippet.
<!DOCTYPE html>
<html>
<head>
<title>ngStyle Directive</title>
<style>
span {
color: black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script>
</head>
<body ng-app style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<h2>
AngularJS | ngStyle Directive
</h2>
<input type="button" value="set color" ng-click="myStyle={color:'red'}" />
<input type="button" value="set background" ng-click="myStyle={'background color':'yellow'}" />
<input type="button" value="clear" ng-click="myStyle={}" />
<br />
<br />
<span ng-style="myStyle">Welcome to Tutorials Point</span>
<pre>myStyle={{myStyle}}
Updated on: 2021-10-08T12:22:20+05:30
975 Views
Advertisements