7 Example(s) of Ng-Style


Description :

In this on button click we can set the style and style will assign to the ng-style directive which will implemented on text.


Ng-Style Example - 1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <button ng-click="style={color:'Red'}">Set Color</button>
        <button ng-click="style={backgroundColor:'yellow'}">Set Background Color</button>
        <button ng-click="style={}">reset</button><br />
        <span ng-style="style">Sample text</span>
    </div>
</body>
</html>

Output

Description :

In this example write the color name in the textbox and the entered color will assign to the ng-style directive and apply to the text displayed.


Ng-Style Example - 2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style type="text/css">
    .bg-color {
        background-color: orange;
    }
</style>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <input type="text" ng-model="color" placeholder="Enter any color." />
        <p ng-repeat="record in records" ng-style="{color:color}">
         <span class="bg-color">  Name: {{record.name}}</span>
        </p>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.records = [{ name: 'Java Script' }, { name: 'AngularJS' }, { name: 'Jquery' }, { name: 'Bootstrap' }];

    }]);
</script>
</body>
</html>

Output

Description :

In this example we have a random collection with color and x,y values. The color is set as background color and value of x assign to the css property 'left' and value of y assign to css property 'top'. Each time when you refresh the page new values will set.


Ng-Style Example - 3
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style type="text/css">
    .circle {
        display: block;
        position: absolute;
        height: 20px;
        width: 20px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
    }
</style>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <div ng-repeat="p in collection">
            <div class="circle" ng-style="{ 'backgroundColor':p.color, 'left':p.x+'px', 'top':p.y+'px' }">
        </div>
    </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.collection = [];
        for (var i = 0; i < 50; i++) {
            var color = Math.floor(Math.random() * 999 + 110);
                color = 'skyblue';
            $scope.collection.push({
                x: Math.min(1180, Math.max(40, (Math.random() * 1160))),
                y: Math.min(380, Math.max(20, (Math.random() * 380))),
                color: color
            })
        };

    }]);
</script>
</body>
</html>

Output

Description :

Ng-repeat display the circles of different colors using boxClass and colors take from array of object colorBg.The color of circles continuously changes due to updateArray function that is call by $interval.


Ng-Style Example - 4
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style type="text/css">
    .boxClass {
        width: 50px;
        height: 50px;
    }
</style>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <table>
            <tr>
                <td ng-repeat="obj in colorBg" class="boxClass" style="border-radius: 30px;                                  background: {{obj.color}}"></td>
            </tr>
        </table>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', '$interval', function ($scope, $interval) {
     
        $scope.colorBg = [{ color: "tomato" }, { color: "maroon" }, { color: "blue" }, { color: "red" }, { color: "yellow" }, { color: "green" }];
        $scope.colorBg1 = [{ color: "tomato" }, { color: "maroon" }, { color: "blue" }, { color: "red" }, { color: "yellow" }, { color: "green" }];
        $scope.updateArray = function () {
            var Arr = $scope.colorBg.splice(0, 1);
            $scope.colorBg.push(Arr[0]);
        };
        $scope.updateArray1 = function () {
            for (var i = $scope.colorBg1.length-1; i >0 ; i--) {
                var Arr = $scope.colorBg1.splice(0,1);
                $scope.colorBg1.push(Arr[0])
            }
        };
        $interval($scope.updateArray, 300);
    }]);
</script>
</body>
</html>

Output

Description :

Ng-repeat display the squares of different colors using boxClass and colors take from array of object colorBg.


Ng-Style Example - 5
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style type="text/css">
    .boxClass {
        width: 50px;
        height: 50px;
    }
</style>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <table>
            <tr>
                <td ng-repeat="obj in colorBg" class="boxClass" style="background: {{obj.color}}"></td>
            </tr>
        </table>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', '$interval', function ($scope, $interval) {
        $scope.colorBg = [{ color: "maroon" }, { color: "magenta" }, { color: "tomato" }, { color: "red" }, { color: "green" }, { color: "yellow" }];
    }]);
</script>
</body>
</html>

Output

Description :

In this example of Ng-Style, We have a dropdown with values ng-model="size" that will give the height and width for the image. Whatever selection will be made by the user that will be applied to the image.See the code:


Ng-Style Example - 6
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="myController">
        <div class="row text-center">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <h4>Image Size</h4>
                        <select class="form-control" ng-model="size" ng-init="size='100'">
                            <option value="100">100 X 100</option>
                            <option value="200">200 X 200</option>
                            <option value="300">300 X 300</option>
                            <option value="400">400 X 400</option>
                            <option value="500">500 X 500</option>
                        </select>
                    </div>
                    <div class="col-md-4"></div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <img ng-style="style" src="http://learnit.visrosoftware.com/datafiles/enter4.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('myController', ['$scope', function ($scope) {
        $scope.$watch('size', function (newVal, oldVal) {
            $scope.style = { 'height': newVal + 'px', 'width': newVal + 'px' };
        });
    }]);
</script>
</body>
</html>

Output

Description :

In this example of Ng-Style, Clicking on Run button will apply the animation using style or you can say CSS. See the output:


Ng-Style Example - 7
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-12">
                        <button class="btn btn-success"
                                ng-click="style1={'margin-left':'500px','background-color':'lightgreen', 'transition':'all 5s ease-out'};
                                    style2={'margin-left':'400px','background-color':'lightblue','transition':'all 5s ease-out'};
                                    style3={'margin-left':'300px','background-color':'lightred','transition':'all 5s ease-out'};
                                    style4={'margin-left':'200px','background-color':'lightmaroon','transition':'all 5s ease-out'}">
                            Run
                        </button>
                    </div>
                </div>
                <div class="row text-center">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-2"></div>
                            <div class="col-md-8">
                                <div ng-style="style1" style="height:100px;width:100px;background-color:tomato;"></div>
                                <div ng-style="style2" style="height:100px;width:100px;background-color:magenta;"></div>
                                <div ng-style="style3" style="height:100px;width:100px;background-color:blue;"></div>
                                <div ng-style="style4" style="height:100px;width:100px;background-color:green;"></div>
                            </div>
                            <div class="col-md-2"></div>
                        </div>
                        <br />
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output