77593
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
