Monday, 7 January 2019

AngularJS ng-class directive


AngularJS ng-class directive

ng-class directive provide you facilitates to add one or more CSS classes on HTML element with an expression. ng-class expression can be a String, an object or an array.

Syntax: - <element ng-class="expression"></element>

If ng-class expression is string then you need to separate classes with space. if expression is object  that it should be key/value pair where key will be used as class name and value will be the Boolean true or false.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>ng-class Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <style>
        .class1 {
            color: white;
            background-color: #18a4a3;
            padding: 40px;
            font-family: "Courier New";
        }

        .class2 {
            background-color: coral;
            padding: 40px;
            color: white;
            font-family: Verdana;
        }

        .class3 {
            background-color: #ffd100 !important;
            padding: 40px;
            color: #333;
            font-family: Verdana;
        }

        .class4 {
            background-color: #2285ff;
            padding: 40px;
            color: #333;
            font-family: Verdana;
        }
    </style>
</head>
<body>
    <p>Select a class:</p>
    <div ng-app="">
        <select ng-model="color">
            <option value="" selected>Select Option</option>
            <option value="class1">Class1</option>
            <option value="class2">Class2</option>
            <option value="class3">Class3</option>
            <option value="class4">Class4</option>
        </select>
        <br />
        <div ng-class="color">
        <h1>Welcome to code-view.com !</h1>           
        </div>
    </div> 

</body>
</html>

OutPut:


No comments:

Post a Comment