CODEWITHSUNDEEP
cssangularjsng-style
user1261710
user1261710

Reputation: 2639

AngularJS - how to replace colour for a box shadow with ng-style?

I am writing an app with Angular 1.5.

I am trying to put a box shadow on my element with a dynamic colour.

Here is what I have tried so far:

  <div
    item="item"
    ng-style="{ 'box-shadow': 5px 0px 0px 0px {{ item.colour }} inset; }"
    ng-repeat="item in vm.items">
</div>

The browser keeps throwing this error: Error: [$parse:lexerr] Lexer Error: Unexpected next character at columns 32-32 [#] in expression [{ 'box-shadow': 5px 0px 0px 0px #800000 inset; }].

item.colour is a string with a hex value in it.

I have also tried this:

ng-style="{ 'box-shadow': 5px 0px 0px 0px item.colour inset; }"

and it doesn't work either.

How can I write my ng-style expression for this case?

Upvotes: 1

Views: 2649

Answers (3)

Ankit Raj
Ankit Raj

Reputation: 1

This works for me

<button 
 class="colour"
 *ngFor="let colour of colors"
 [ngClass]="{ 'selected': selectColour === colour }"
 [ngStyle]="{ 'box-shadow': '1px 2px 3px 0px' + colour + ' inset' }"
></button>

Upvotes: 0

Syedur
Syedur

Reputation: 424

You can write your html in following way:

<div
    item="item"
    ng-style="GetBoxShadowStyle(item)"
    ng-repeat="item in vm.items">
</div>

and your controller should have a method like following:

$scope.GetBoxShadowStyle = function (item) {
   var boxShadowStyleVal = '5px 0px 0px 0px ' + item.colour + ' inset' ;
   return { "box-shadow": boxShadowStyleVal  };
};

Upvotes: 1

lenilsondc
lenilsondc

Reputation: 9800

Within ng-style attribute you can write an expression that works very much like javascript, that is, you can concatenate string the same way javascript does.

For example:

ng-style="{ 'box-shadow': '5px 0px 0px 0px ' + item.colour + ' inset' }"

UPDATE 1 Working snippet

.box {
  width: 100px;
  height: 100px;
  background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<div ng-app ng-init="item = { colour: '#800000'}">
  <div class="box" ng-style="{ 'box-shadow': '5px 0px 0px 0px ' + item.colour + ' inset' }">
  </div>
</div>

Upvotes: 3

Related Questions