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:
ngStyle="{'max-width': '20px' }" is also giving the same error please help me solve this 
On
<!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>
The correct syntax is to define pixels in the key, not in the value:
See https://angular.io/api/common/NgStyle