Using the farbtastic color picker, I am trying to pass the color code from jQuery to the HTML element with the property [style.backgroundColor]="color" when a button is clicked.
HTML:
<button ion-col full clear id="color-picker-handler" (click)="initiateColorPicker()">Pick Color</button>
<ion-row class="selectedColor">
<div class="selectedcolorCircle ion-col" [style.backgroundColor]="color" >
</div>
<div class="selectcolor ion-col">
</div>
</ion-row>
TS file:
initiateColorPicker() {
jQuery('.selectcolor').farbtastic(function(color) {
console.log(color)});
console.log('Clicked');
}
CSS :
.selectedColor {
padding: 15px;
width: 100%;
min-height: 200px;
text-align: center;
.selectedcolorCircle {
width: 135px;
height: 135px;
border-radius: 50%;
margin: 0 auto;
}
}