77593

Importing jscolor library in angular 2

Im trying to get the JScolor library to work on my angular 2 site. Im fairly new so I dont have a clue what the problem is.

In my component I import the library like:

Import 'the/path/to/the/library';

And I give the html element the class jscolor so the library knows on which element it should work.

Is this just never gonna work since angular 2 framework just doesnt work like this or do I forget something?

Answer1:

In your index.html add a script tag to load the jscolor.js:

<script src='the/path/to/the/library'></script>

I generated a type defintion file for TypeScript which should basically work here: https://gist.github.com/rinukkusu/63ae4530561c89a95c9c3d716c0a7b3b

declare var jscolor: { dir: string; binding: boolean; preloading: boolean; install: () => void; init: () => void; getDir: () => any; detectDir: () => any; bind: () => void; preload: () => void; images: { pad: number[]; sld: number[]; cross: number[]; arrow: number[]; }; imgRequire: {}; imgLoaded: {}; requireImage: (filename: any) => void; loadImage: (filename: any) => void; fetchElement: (mixed: any) => any; addEvent: (el: any, evnt: any, func: any) => void; fireEvent: (el: any, evnt: any) => void; getElementPos: (e: any) => number[]; getElementSize: (e: any) => any[]; getMousePos: (e: any) => any[]; getViewPos: () => number[]; getViewSize: () => number[]; URI: (uri: any) => void; color: (target: any, prop: any) => void; };

In the component, or wherever you need it reference that type definition file like this at the top of your file:

///<reference path="path/to/the/jscolor.d.ts"/> <hr>

Alternatively you could look into https://github.com/Alberplz/angular2-color-picker

Recommend

  • SharePoint - Invalid Field Name Error
  • How does content in an a-element affects semantics, screen readers and search engines?
  • PInvoke Nikon c++ DLL Function from c#
  • jquery globalcss IE opacity
  • Uncaught TypeError: $(…).select2 is not a function
  • How to view images from protected folder with php?
  • Display images in Django
  • How to install a .deb file on a jailbroken iphone programmatically?
  • Ajax Loaded meta Tags
  • DomPDF {PAGE_NUM} not on first page
  • Get one-time binding to work for ng-if
  • Why is an OPTIONS request sent to the server?
  • Javascript simulate pressing enter in input box
  • Uncaught Error: Could not find module `ember-load-initializers`
  • req.body is undefined - nodejs
  • Volley JsonObjectRequest send headers in GET Request
  • Resize panoramic image to fixed size
  • How to set/get protobuf's extension field in Go?
  • Modifying destination and filename of gulp-svg-sprite
  • Cassandra Data Model
  • Trying to switch camera back to front but getting exception
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • A cron job substitute?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • JTable with a ScrollPane misbehaving
  • Angular 2 constructor injection vs direct access
  • How do I configure my settings file to work with unit tests?
  • Java static initializers and reflection
  • embed rChart in Markdown
  • Android Google Maps API OnLocationChanged only called once
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal