"Cannot find a differ supporting object" when I am using ngstyle

Question

I do have a progress bar

<div class="progress-bar-line red" role="progressbar"  
    aria-valuenow="redrated" aria-valuemin="0" aria-valuemax="100"
    ngStyle="max-width:{{redrated}}%"
>
    <span class="title">{{ redrated }}%</span>
</div>

I have used ngStyle="max-width:{{redrated}}%" and tried attempts:

Have made a object in component and called that in ng style
Even ngStyle="{'max-width': '20px' }" is also giving the same error please help me solve this

Manvendra Priyadarshi · Answer 1 · 2018-01-19T12:02:55.603

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <body>
    <div ng-app="myApp" ng-controller="myCtrl">    
    <div class="progress-bar-line red" role="progressbar"  
                aria-valuenow="redrated" aria-valuemin="0" aria-valuemax="100"
                ng-style="{'max-width': '{{redrated}}%'}">
                <span class="title">{{ redrated }}%</span>
            </div>
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.redrated = 20;
    });
    </script>
    </body>
    </html>

"Cannot find a differ supporting object" when I am using ngstyle

1 Answers1