How to use ng-style in AngularJs?

How to use ng-style in AngularJs?

Hello everyone, I am going to share the code sample for how to use the ng-style in angularjs. The ng-style is used to handle the css property just like css style. Here we can use css style name and its value with respect to your choices.

Go to online live demo click to http://embed.plnkr.co/20TBCQ/preview

In the below example, I handle the a progress bar with green color out of your 100% gray color data usage.

The css code sample as given below

<style>
    .yelloColor {
        background-color: gray;
    }

    .meterColor {
        background-color: green;
    }
</style>

The Angular code sample as given below

<script>
    var app = angular.module('ngStyleApp', []);
    app.controller('ngStyleCtrl', function ($scope) {
        $scope.bar = "48%";
    });
</script>

The HTML code sample as given below

<div ng-app="ngStyleApp" ng-controller="ngStyleCtrl">
    <div class="yelloColor">
        <div class="meterColor" ng-style="{'width':bar}">
            <h4> {{bar}} DATA USED OF 100%</h4>
        </div>
    </div>
</div>

The Full Live demo code sample as given below

<!DOCTYPE html>
<html>
<head>
    <style>
        .yelloColor {
            background-color: gray;
        }

        .meterColor {
            background-color: green;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script>
        var app = angular.module('ngStyleApp', []);
        app.controller('ngStyleCtrl', function ($scope) {
            $scope.bar = "48%";
        });
    </script>
</head>
<body ng-app="ngStyleApp" ng-controller="ngStyleCtrl">
    <div class="yelloColor">
        <div class="meterColor" ng-style="{'width':bar}">
            <h4> {{bar}} DATA USED OF 100%</h4>
        </div>
    </div>
</body>
</html>

The Live Result,



Thank you!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.