CODEWITHSUNDEEP
angularjshtmlcolor-picker
Bhushan Khaladkar
Bhushan Khaladkar

Reputation: 622

Fetch and assign colorpicker hexa values as a background in angularjs

I am running angularJS project and i have taken HTML color picker, i want to assign the selected color from colorpicker to my div. Values should be hexa decimal.My code is as follows.

   <input type="color" id="html5colorpicker" style="width:85%;">

   <div>Testing for bachground color </div>

Or is there any other control which i can you use for the above purpose(Angularjs).

Upvotes: 1

Views: 877

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

Just use background-color property and assign hexadecimal value to that 

<div style="background-color: #a9a1a1;">Testing for bachground color </div>

EDITED

you need to use ng-style attribute to bind the style after the color selected from the color picker.

first use ng-model to get the selected color value 

<input type="color" id="html5colorpicker" ng-model="mycolor" />
<div ng-style="divStyle">Testing for bachground color </div>

In the controller create a watch for ng0model variable and add the style to divStyle

 $scope.divStyle = {
    'background-color': 'white'
 }
 $scope.$watch('mycolor', function(val) {
    $scope.divStyle = {
        'background-color': val
    }
 });

DEMO

Upvotes: 2

Related Questions