sridharan sridharan - 4 months ago 14
CSS Question

How to get Style From jQuery in angular2

i'm using farbtastic color picker when i button click showing color picker how to pass color code from jquery to

[style.backgroundColor]="color"


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;

}
}

Answer

This may help you,

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  (...)
})

export class MyComponent {
  constructor(private cdr:ChangeDetectorRef) {
  }


   initiateColorPicker() {
      jQuery('.selectcolor').farbtastic((color)=>{
        console.log(color)
        this.color=color;
        this.cdr.detectChanges();
      });

      console.log('Clicked');
  }
}
Comments