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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.