python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions