Changing Css From Array Value

Question

I know in Angular you can dynamically add a class to the element but how do I change the value of a property? I want each button to be the next spotColour of the array. I feel like my example explains it well:

<button style="background-color: arrThemes[0]['spotColour']"></button>
<button style="background-color: arrThemes[1]['spotColour']"></button>
<button style="background-color: arrThemes[2]['spotColour']"></button>

arrThemes = [
  {spotColour : 'rgb(238, 68, 136)', baseColour : 'rgb(80, 54, 78)'},
  {spotColour : 'rgb(179, 165, 136)', baseColour : 'rgb(88, 67, 59)'},
  {spotColour : 'rgb(87, 167, 82)', baseColour : 'rgb(47, 68, 46)'},
];

Suren Srapyan · Accepted Answer · 2018-06-07 08:07:48Z

4

Try something like this expression with

<button style="{{ 'background-color: ' + arrThemes[0]['spotColour'] }}"></button>

or in more civil way using NgStyle

<button [ngStyle]="{'background-color': arrThemes[0]['spotColour']}"></button>

edited Jun 7, 2018 at 8:07

answered Jun 7, 2018 at 8:04

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Suren Srapyan Over a year ago

Try another variant. Also I have edited the first one. Try again

Sachila Ranawaka · Accepted Answer · 2018-06-07 08:05:33Z

2

use ngStyle tag to dynamically add styles

<button *ngFor="let item of arrThemes " [ngStyle]="{'background-color': item.spotColour }"></button>

answered Jun 7, 2018 at 8:05

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Comments

prady · Accepted Answer · 2018-06-07 08:40:04Z

1

you can use ngStyle angular directive for that.

like below

<button [ngStyle]="{'background-color': arrThemes[0]['spotColour']}"></button>

edited Jun 7, 2018 at 8:40

answered Jun 7, 2018 at 8:06

prady

4262 gold badges6 silver badges17 bronze badges

1 Comment

Frank Over a year ago

Please add examples instead of just referring to documentations

Collectives™ on Stack Overflow

Changing Css From Array Value

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related