1

i need to put this code line (angularJS) in angular 2+ , how can i do this?

I already do some searchs but this line is confusing me.

scope.variable.value = event.color.toHex()

Old Code:

function callColorpicker() {
    var colorpicker = $('.colorpicker')
    colorpicker.colorpicker().on('changeColor', function(event) {
      
      var scope = angular.element(this).scope()
      scope.variable.value = event.color.toHex()

      if ($scope.autoapplysass) {
        $scope.autoApplySass()
      }
    })
  }

New Code:

callColorpicker() {
      var colorpicker = $('.colorpicker')
      colorpicker.colorpicker();
      var _this = this;
      colorpicker.colorpicker().on('changeColor', function(event) {
      
      --> scope.variable.value = event.color.toHex()

          if (_this.applySass) {
            _this.applySass(false)
          }
      })     
    }
3
  • update.angular.io
    – HariHaran
    Jun 4, 2021 at 14:31
  • can you add a snippet of your code and show what exactly you wanna change?
    – moustafa
    Jun 4, 2021 at 14:33
  • already added now
    – Hugo Silva
    Jun 4, 2021 at 14:54

1 Answer 1

0

In general, if you can avoid jQuery with Angular it's a good thing because Angular handles things completely differently than JQ and in many ways the two step on each other's toes. This can be difficult to troubleshoot and down the line could cause issues that are increasingly harder to diagnose.

In your case, as luck would have it, there is an angular color picker component you could substitute with.

install with npm npm install ngx-color-picker --save

Then in app.module.ts

import { ColorPickerModule } from 'ngx-color-picker';

@NgModule({
  ...
  imports: [
    ...
    ColorPickerModule
  ]
})

In your HTML

<input [(colorPicker)]="color" 
        [style.background]="color"
        (colorPickerChange)="onColorChange($event)"   />

and in your component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { ColorPickerService, Cmyk } from 'ngx-color-picker';

constructor(public vcRef: ViewContainerRef, private cpService: ColorPickerService) {}

export class AppComponent {
    color: string;

    onColorChange(newColor) {
       
          this.color = newColor;

          if (_this.applySass) {
            _this.applySass(false)
          }
       
    }
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.