Clicking on the image changes the {{colour}}

[Team AF]

I have a {{bgColour}} which is linked to ng-model="bgColour". I want to assign a #colourValue ( say #fff or #000 etc) to {{bgColour}} when an image ( say in colour RED ) in a popup modal. The idea is to change colours in a theme when clicked on the colour palette ( just a bunch of images with corresponding colour ). bgColour is the theme colour which I am trying to change. Trying to use ng-click=" an expression to insert corresponding hex colour value for bgColour " to change the colour. But I do not know the expression that could be used to insert various hex colour values when different images are clicked. Any help would be great.

[Sander Elias]

Hi Team,

This is the simplest solution I could come up with:

    <input type="color" ng-model="vm.bgcolor">
    <div  ng-style="{'background-color':vm.bgcolor}">
      Sample area <br>
      {{vm.bgcolor | json:true}} <br>
    </div>

Does that help your use-case?

Regards
Sander

[Team AF]

Awesome ! Works great. My primary requirement is to bind the colour change to a CSS class. How can I accommodate with this code ?

[Newen F]

you would make 2 classes. like the two different states. and just add the class when you wan to change state. right?

<div [class.className]='conditional' ></div>

I think.

[Team AF]

Real beginner. Kindly give me the code.