alberplz / angular2-color-picker Goto Github PK
View Code? Open in Web Editor NEWAngular 2 Color Picker Directive, no dependences required.
License: MIT License
Angular 2 Color Picker Directive, no dependences required.
License: MIT License
The name of the ColorPickerModule is changed to "e" when imported (Runtime error). I'm using the color picker in a module that is loaded in lazy mode (It works fine with angular version 2.1.0).
here is the error stack:
Uncaught (in promise): Error: Unexpected value 'e' imported by the module 'ParametrageAnomalieModule'
Error: Unexpected value 'e' imported by the module 'ParametrageAnomalieModule'
at SyntaxError.BaseError [as constructor] (http://localhost:8080/javascripts/bundle.js:19196:30) [angular]
at new SyntaxError (http://localhost:8080/javascripts/bundle.js:19394:19) [angular]
at http://localhost:8080/javascripts/bundle.js:35721:47 [angular]
at Array.forEach (native) [angular]
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8080/javascripts/bundle.js:35706:52) [angular]
at JitCompiler._loadModules (http://localhost:8080/javascripts/bundle.js:44889:67) [angular]
at JitCompiler._compileModuleAndComponents (http://localhost:8080/javascripts/bundle.js:44849:55) [angular]
at JitCompiler.compileModuleAsync (http://localhost:8080/javascripts/bundle.js:44815:24) [angular]
at ModuleBoundCompiler.compileModuleAsync (http://localhost:8080/javascripts/bundle.js:45230:34) [angular]
at MergeMapSubscriber.project (http://localhost:8080/javascripts/bundle.js:72003:235) [angular]
at MergeMapSubscriber._tryNext (http://localhost:8080/javascripts/bundle.js:78514:28) [angular]
at MergeMapSubscriber._next (http://localhost:8080/javascripts/bundle.js:78504:19) [angular]
at MergeMapSubscriber.Subscriber.next (http://localhost:8080/javascripts/bundle.js:59296:19) [angular]
at http://localhost:8080/javascripts/bundle.js:77469:37 [angular]
at SyntaxError.BaseError [as constructor] (http://localhost:8080/javascripts/bundle.js:19196:30) [angular]
at new SyntaxError (http://localhost:8080/javascripts/bundle.js:19394:19) [angular]
at http://localhost:8080/javascripts/bundle.js:35721:47 [angular]
at Array.forEach (native) [angular]
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8080/javascripts/bundle.js:35706:52) [angular]
at JitCompiler._loadModules (http://localhost:8080/javascripts/bundle.js:44889:67) [angular]
at JitCompiler._compileModuleAndComponents (http://localhost:8080/javascripts/bundle.js:44849:55) [angular]
at JitCompiler.compileModuleAsync (http://localhost:8080/javascripts/bundle.js:44815:24) [angular]
at ModuleBoundCompiler.compileModuleAsync (http://localhost:8080/javascripts/bundle.js:45230:34) [angular]
at MergeMapSubscriber.project (http://localhost:8080/javascripts/bundle.js:72003:235) [angular]
at MergeMapSubscriber._tryNext (http://localhost:8080/javascripts/bundle.js:78514:28) [angular]
at MergeMapSubscriber._next (http://localhost:8080/javascripts/bundle.js:78504:19) [angular]
at MergeMapSubscriber.Subscriber.next (http://localhost:8080/javascripts/bundle.js:59296:19) [angular]
at http://localhost:8080/javascripts/bundle.js:77469:37 [angular]
at resolvePromise (http://localhost:8080/javascripts/bundle.js:16208:32) [angular]
at resolvePromise (http://localhost:8080/javascripts/bundle.js:16193:18) [angular]
at http://localhost:8080/javascripts/bundle.js:16242:18 [angular]
at Object.onInvokeTask (http://localhost:8080/javascripts/bundle.js:50105:42) [angular]
at ZoneDelegate.invokeTask (http://localhost:8080/javascripts/bundle.js:15996:41) [angular]
at Zone.runTask (http://localhost:8080/javascripts/bundle.js:15873:48) [ => angular]
at drainMicroTaskQueue (http://localhost:8080/javascripts/bundle.js:16140:36) []
As of RC6 directive is no longer on Component so manuals need to be updated.
If we are movind directive into section of declarations and running aot compilation its throwing exception:
Error: Unexpected value 'ColorPickerDirective' declared by the module 'AppModule'
using the following tslint.json config file, the project throws lots of fails
{
"rulesDirectory": [
"node_modules/codelyzer"
],
"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"curly": true,
"eofline": true,
"forin": true,
"indent": [
true,
"spaces"
],
"label-position": true,
"label-undefined": true,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
"static-before-instance",
"variables-before-functions"
],
"no-arg": true,
"no-bitwise": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-key": true,
"no-duplicate-variable": true,
"no-empty": false,
"no-eval": true,
"no-inferrable-types": true,
"no-shadowed-variable": true,
"no-string-literal": false,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unused-expression": true,
"no-unused-variable": true,
"no-unreachable": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],
"quotemark": [
true,
"single"
],
"radix": true,
"semicolon": [
"always"
],
"triple-equals": [
false,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": false,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
],
"directive-selector-name": [true, "camelCase"],
"component-selector-name": [true, "kebab-case"],
"directive-selector-type": [true, "attribute"],
"component-selector-type": [true, "element"],
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": true,
"no-input-rename": true,
"no-output-rename": true,
"use-life-cycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true,
"directive-selector-prefix": [false],
"component-selector-prefix": [false],
"pipe-naming": [true, "camelCase"]
}
}
Hi there
we noticed there's a fork of this project at bbbenja/angular2-color-picker, which seems mainly centered around cleaning up sources in repository, keeping up-to-date with dependencies, making library available to npm. Unfortunately issues are closed there.
Then there's also an open PR #11 here, still aiming to have an npm package.
Is there any chance to join all those efforts, better under a single project, so to have basically the angular 2 color-picker? Thanks
If you choose white it goes to #fff
. Can we make it so it always gives six character hex values? As in force #ffffff
.
When pasting a hex color into a color picker component, this exception is thrown:
Cannot read property 'setColorFromString' of undefined
and this stack trace is logged to the console
TypeError: Cannot read property 'setColorFromString' of undefined
at ColorPickerDirective.changeInput (color-picker.directive.ts:105)
at Wrapper_ColorPickerDirective.handleEvent (wrapper.ngfactory.js:246)
at View_StyleDetailsComponent2.handleEvent_224 (component.ngfactory.js:2333)
at View_StyleDetailsComponent2.eval (core.umd.js:9475)
at HTMLInputElement.eval (platform-browser.umd.js:1473)
at ZoneDelegate.invokeTask (zone.js:265)
at Object.onInvokeTask (core.umd.js:5967)
at ZoneDelegate.invokeTask (zone.js:264)
at Zone.runTask (zone.js:154)
at HTMLInputElement.ZoneTask.invoke (zone.js:335)
+-----+---------------------------------------------------------------------------+
| Alberplz/angular2-color-picker |
+-----+---------------------------------------------------------------------------+
| π΄ | 44 forks. |
| π | 9 watchers. |
| π | 81 stars. |
| π | Created 10 months ago; last push 2 days ago. |
| π» | 26 PRs: 16 closed; 10 opened; 61.54% PRs are closed. |
| π | Deletions to additions ratio: 56.86% (-5659/9952). |
| π¦ | 11 releases; latest release "Angular2 Color Picker 1.3.0": 3 months ago. |
| π | Bus factor: 50.0% (2 impactful contributors out of 3). |
+-----+---------------------------------------------------------------------------+
Seems like this project is lacking some maintenance. Would you mind giving more contributors access or creating an organization, @Alberplz?
We are attempting to use this color picker to choose the color of a ui element in our system. We have an undo/redo system to allow users to undo changes they make. We listen for (colorPickerChange) to add items to our undo/redo stack. When a change is undone, the color of the ui element changes which is passed to the color picker via [colorPicker]. But this in turn causes another (colorPickerChange) event to fire. This results in committing a new item to the stack when there shouldn't be one.
similar to this issue with md-checkbox: angular/components#820
Hi,
I had to add
ngOnInit() {
if (this.colorPicker) {
let hsva = this.service.stringToHsva(this.colorPicker);
if (hsva !== null) {
this.colorPickerChange.emit(this.service.outputFormat(hsva, this.cpOutputFormat));
}
}
}
to the directive, to get it going. Is this correct?
I have come across an issue when building for production.
I have a development structure such
public/
app/
folders/
If you have a step such as tsc -p public --outdir dist
Instead of getting
dist/
app/
folders/
The tsc compilers gets confused by the presence of the color-picker, and I get.
dist/
app/
public/
app/
node_modules/
angular2-color-picker.
If I remove the color picker, the tsc --outDir command works correctly. If I try and force the rootDir, tsc complains about the index.ts and index.d.ts files being at the same level in color-picker.
Has anyone else found this problem and maybe had a solution?
Folks,
I cannot build, I get teh above error . My tsconfig contains "rootDir": "wwwroot".
I was able to work around by deleting all *.ts where there was a duplicate *.d.ts as suggested by the posts below.
I could have it wrong, but I believe the recommendation is to to change the .npmignore and ignore -
.ts
!.d.ts
According to this post,
valor-software/ng2-select#161
which references this commit change the .npmignore
valor-software/ng2-select@393674c
After including the ColorPickerModule in my AppModule class. Any attempt to use the Color Picker with a webpack compiled app produces the following message in console.
Uncaught Error: Unexpected value 'e' imported by the module 'AppModule'(β¦)
Not particularly useful I know. Can you give me a rough guide as to when the Color Picker will be moving towards Angular 2.1.0?
The problem does not occur with SystemJS, but that is expected, as SystemJS does not package up the requisite parts from the angular node modules.
Also strangely, when not including the color picker and not uglyfying the code, the app.js chunk is 34kb. When including colorpicker and using Angular 2.1.0, the app.js is 900kb. It appears as if the the entire of the Angular 2.0.0 system that the color picker requires is included in app.js.
Hi,
I am getting new error on latest ng2 upgrade.
It doesn't seem to like this.el
*color-picker.directive.ts line 40 *
this.dcl.loadNextToLocation(DialogComponent, this.el)
Severity Code Description Project File Line Suppression State Error TS2345 Argument of type 'ElementRef' is not assignable to parameter of type 'ViewContainerRef'. Property 'element' is missing in type 'ElementRef'. TypeScript Virtual Projects \views\service\color-picker\color-picker.directive.ts 40 Active
The component wasn't working at all when imported from node_modules. So I took the typescript sources and put them in their own directory amid the rest of my sources. Then all was well.
... until I generated the production build (using webpack). On the dev server, everything works fine. But on the production build, the only single thing that does not work is this colorpicker component.
The dialog just won't open. Instead, I get this error:
app.dd5b3c0β¦.js:88596 Error: No NgModule metadata found for 'DynamicCpModule'. at NgModuleResolver.resolve (app.dd5b3c0β¦.js:67790) at CompileMetadataResolver.getNgModuleMetadata (app.dd5b3c0β¦.js:66867) at RuntimeCompiler._compileComponents (app.dd5b3c0β¦.js:84200) at RuntimeCompiler._compileModuleAndAllComponents (app.dd5b3c0β¦.js:84144) at RuntimeCompiler.compileModuleAndAllComponentsAsync (app.dd5b3c0β¦.js:84135) at ModuleBoundCompiler.compileModuleAndAllComponentsAsync (app.dd5b3c0β¦.js:84453) at ColorPickerDirective.exports.ColorPickerDirective.ColorPickerDirective.openDialog (app.dd5b3c0β¦.js:99029) at ColorPickerDirective.exports.ColorPickerDirective.ColorPickerDirective.onClick (app.dd5b3c0β¦.js:99022) at _View_ColorInterfaceComponent0._handle_click_5_2 (ColorInterfaceComponent.ngfactory.js:292) app.dd5b3c0β¦.js:88596 Error: No NgModule metadata found for 'DynamicCpModule'. at NgModuleResolver.resolve (app.dd5b3c0β¦.js:67790) at CompileMetadataResolver.getNgModuleMetadata (app.dd5b3c0β¦.js:66867) at RuntimeCompiler._compileComponents (app.dd5b3c0β¦.js:84200) at RuntimeCompiler._compileModuleAndAllComponents (app.dd5b3c0β¦.js:84144) at RuntimeCompiler.compileModuleAndAllComponentsAsync (app.dd5b3c0β¦.js:84135) at ModuleBoundCompiler.compileModuleAndAllComponentsAsync (app.dd5b3c0β¦.js:84453) at ColorPickerDirective.exports.ColorPickerDirective.ColorPickerDirective.openDialog (app.dd5b3c0β¦.js:99029) at ColorPickerDirective.exports.ColorPickerDirective.ColorPickerDirective.onClick (app.dd5b3c0β¦.js:99022) at _View_ColorInterfaceComponent0._handle_click_5_2 (ColorInterfaceComponent.ngfactory.js:292)
Can anyone tell me what I should do? As previously mentioned, all is well with the dev build, so it does not seem to have anything to do with how I'm using the component...
There is an error on line https://github.com/Alberplz/angular2-color-picker/blob/master/app/color-picker/color-picker.html#L36. It should be (newValue)="setColorFromString($event)", not setColorFromHex. Currently this line raises an exception.
Hi,
I have followed the instructions in the readme, but when I click on color picker in my webpage I get this error: Uncaught (in promise): TypeError: Cannot read property 'getViewContainerRef' of undefined. Do you have any clue what could be wrong?
How can the directive be setup with reactive forms? Say you have this excerpt of component:
<!-- ... -->
<form class="container" [formGroup]="myForm">
<label for="myField">Some label</label>
<input id="myField" formControlName="myControl" type="text">
</form>
<!-- ... -->
// ...
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.myForm = this.fb.group({
myControl: ['', Validators.required],
});
this.myForm.valueChanges.subscribe(/* ... */);
}
someSetterMethod(newValue: string) {
this.myForm.patchValue({
myControl: newValue,
});
}
// ...
}
valueChanges
stream?patchValue
/setValue
into color picker?TA
Is possible to toggle the color picker? I don't know how I can close the color Picker.
Or have an event to manage it
Updated angular to 2.3.0 and start getting this error
Unexpected value 'ColorPickerModule' imported by the module
Anyone knows how to fix this?
Using angular 2 release version with weback getting error "a.Rgba is not a constructor".
Seems like #38 should resolve the issue.
Update
Issue appears only with minified code
new UglifyJsPlugin({
beautify: false, //prod
mangle: { screw_ie8 : true, keep_fnames: true }, //prod
compress: { screw_ie8: true }, //prod
comments: false //prod
}
Are there any plans for the upgrade to RC1?
Solution would be something like this here: #11
Top and left positioning seems wrong when use under flex
Here is how I use :
<div class="color-picker-handle" cpAlphaChannel="disabled" cpOKButtonClass="material-link"
[cpOKButton]="true" [cpCancelButton]="true" cpCancelButtonClass="material-link"
[colorPicker]="_color" (colorPickerChange)="_color=$event" [style.background]="_color"></div>
Did I miss something ?
I have two input like this:
<div class = "form-group">
<label for="editbox-bgcolor"> Background color </label>
<input class = "colorpicker" [cpCancelButton] = "true" name = "editbox-bgcolor" [(colorPicker)]="selectedBox.bgColor" [style.background]="selectedBox.bgColor" [value] = "selectedBox.bgColor"/>
</div>
When first time I opened color picker, all thing was fine.
I move cursor and chose other value, then I closed the picker.
Then "selectedBox.bgColor" was updated. It updated due to the change of my model (I chose another box which have other bgColor). Then
In this time the [style.background] and [value] was updated correctly.
But when I open the color picker panel, the initialized cursor still pointed to the last value that i set to the last box before, it was not update to my new "selectedBox.bgColor" when i opened it.
How can I reinit this value cursor when my model change?
Thanks!!
Hi Albert!,
I want to use the package, but I do not have the system.config.js file
My project is Ionic2 + Angular2
[15:13:39] Error: Unexpected value 'ColorPickerModule' imported by the module 'AppModule'
[15:13:39] ngc failed
[15:13:39] ionic-app-script task: "build"
[15:13:39] Error: Error
Cordova CLI: 6.3.1
Gulp version: CLI version 1.2.2
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.38
Node Version: v6.2.2
Merci company!
I would like to have support for non-string formats, e.g.
I could write a custom color service, but it expects a string as input.
great component, please add touch for mobile
in mobile can't drag any of the points.
tx
Regards,
Sean
Checkout the Ultimate Angular 2 Boorstrap App: @ http://ng2.javascriptninja.io
Source@ https://github.com/born2net/ng2Boilerplate
The color picker bar doesn't scale well with increased width, it's still operating as if it was 230px (default) size. This is only a visual bug as you can still pick any color range you want, it just stops what looks like half ways.
Also I get a lot of errors if I try to put the picker inside divs with *ngIf. Cannot find property a and h in undefined
For some reason, the node_modules
folder is being included when downloading the package. The node_modules
folder contains rxjs
and @angular
. I removed the rxjs
dependency in #57 but Angular being in node_modules
is the culprit.
The example page only shows "Loading...". In console there are some errors.
Hi, I would like to use the color picker without a dropdown and a button. Are there any plans?
I have a problem with the color picker.
I use angular 2.0.0-rc.1
My app.ts:
import 'reflect-metadata';
import 'zone.js/dist/zone';
import { Component, provide } from '@angular/core';
import { bootstrap } from 'angular2-meteor-auto-bootstrap';
import { Parties } from '../collections/parties';
import { Mongo } from 'meteor/mongo';
import {SidebarComponent} from './sidebar/sidebar.component';
import { APP_BASE_HREF } from '@angular/common';
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from '@angular/router-deprecated';
import {HomeComponent} from './home.component';
import {ColorSettingsComponent} from './settings/commonsettings.component'
import {ColorPickerDirective} from './color-picker/color-picker.directive'
import {ColorPickerService} from './color-picker/color-picker.service'
@Component({
selector: 'app',
templateUrl: 'client/main.template.html',
directives: [SidebarComponent, ROUTER_DIRECTIVES, ColorPickerDirective]
})
@RouteConfig([
{path: '/home', name: 'OtherSettings', component: HomeComponent, useAsDefault: true},
{path: '/colorSettings/...', name: 'ColorSettings', component: ColorSettingsComponent}
])
class App {
private color: string = "#127bdc";
}
bootstrap(App, [ColorPickerService, ROUTER_PROVIDERS, provide(APP_BASE_HREF, { useValue: '/' })]);
And the main.template.html
<router-outlet></router-outlet>
<input [(colorPicker)]="color" [style.background]="color" [value]="color"/>
Now when I load my app I see the input field with the color in it! But when I click on it it doesnt give me the popup with the color selector. Instead it loads reinitialize my app inside the current app.
DOM after clicking:
<color-picker _ngcontent-ury-6="" _nghost-ury-7="">
<html _ngcontent-ury-7="">
<head _ngcontent-ury-7="">
<link _ngcontent-ury-7="" class="__meteor-css__" href="/merged-stylesheets.css?hash=022116d8e3adef6d19b855e9e9ca1fab0257cb78" rel="stylesheet" type="text/css">
</head>
<body _ngcontent-ury-7="">
<app _ngcontent-ury-7="">Loading</app>
I get no errors. And when I type #hex values in the input field the color changes accordingly. What am I doing wrong?
Greetings and thanks in advance
Please change project name in package.json now it is angular2-quickstart...
There are cases when the picker dialog remain visible even after the [hidden]
attribute is set to true. According to this post and some questions on StackOverflow, it seems like such attribute is relatively easy to break, e.g. when the same elements gets assigned a display
value by some CSS rule.
According to same post, some of the viable alternatives would be:
Define a css style for hidden attribute with display:none !important at the end of css stylesheet.
[hidden] {
display: none !important;
}
Second solution is, letβs not use hidden attribute. You can achieve your purpose with following code.
<p [style.display]="hideElement?'none':'inherit'">
I am using hidden.
</p>
The last commit to angular2-color-picker (1.2.1) fixed NG 2 new module issues and webpack issues. However, the latest NG update (2.0.2) appears not to recognise the color picker.
I am using angular cli (webpack) for build.
Thanks for making this, works great! I do see some tsc compile errors. I tried typings install.
app/views/service/color-picker/color-picker.directive.ts(142,23): error TS2339: Property 'pageX' does not exist on type 'Event'.
app/views/service/color-picker/color-picker.directive.ts(142,51): error TS2339: Property 'pageX' does not exist on type 'Event'.
app/views/service/color-picker/color-picker.directive.ts(142,65): error TS2339: Property 'touches' does not exist on type 'Event'.
app/views/service/color-picker/color-picker.directive.ts(145,23): error TS2339: Property 'pageY' does not exist on type 'Event'.
app/views/service/color-picker/color-picker.directive.ts(145,51): error TS2339: Property 'pageY' does not exist on type 'Event'.
app/views/service/color-picker/color-picker.directive.ts(145,65): error TS2339: Property 'touches' does not exist on type 'Event'.
This is a great little component. I was already dreading having to write one from scratch.
I am a but concerned about the frequent use of the '''window''' and document
globals however which would limit the components use in web workers for instance where you don't have access to the DOM. Couldn't the event listeners be attached in other ways?
I'm trying to use:
private color;
<span [(colorPicker)]="color"
[cpType]="'fixed'"
[style.background]="color"
[cpToggle]="true"></span>
shows the following error:
Error in ./DialogComponent class DialogComponent - inline template:30:182 caused by: Cannot read property 'a' of undefined
What's wrong?
In my sample project i have included angular2-color-picker library file, which is not supported for AoT compiler. I am getting the following error " Error : Cannot determine the module for component DialogComponent!" .
Can Anyone please tell me how to fix this issue?
The library doesn't work with webpack and the angular 2 rc6. It seems like external libraries that are compiled to .js needs to have a metadata.json (https://github.com/orizens/angular2-infinite-scroll/issues/77, ). I'm having the same issue as described here, http://stackoverflow.com/questions/39335621/angular2-metadata-error-when-pre-compiling-feature-module.
Error: Unexpected value 'ColorPickerModule' imported by the module 'AppModule'
I get this error while importing color picker module inside my module file.
<span [(colorPicker)]="highlightColors[highlightColor]"
[cpOutputFormat]="'hex'"
[cpDialogDisplay]="'inline'"
[style.background]="highlightColors[highlightColor]"
[cpToggle]="true">
</span>
Error:
EXCEPTION: Error in ./DialogComponent class DialogComponent - inline template:30:182 caused by: Cannot read property 'a' of undefined
The plugin doesn't seem to work with Angular 2 RC 6, please add support for NgModule.
Hi,
I'm trying to use color picker in a Ionic 2 app but got no success so far.
When loading my component, I've got an error
No Directive annotation found on ColorPickerDirective
I'm loading the service in my app.ts:
import { ColorPickerService } from 'angular2-color-picker';
@Component({
...
})
export class OpenScore {
....
}
ionicBootstrap(OpenScore, [
ColorPickerService
]);
Directive is loaded in my component:
import { ColorPickerDirective } from 'angular2-color-picker';
@Component({
templateUrl: 'template.html',
directives: [ColorPickerDirective]
})
export class Component {
constructor(
){}
public color: string = "#127bdc";
}
And trying to load the directive in my template:
<input [(colorPicker)]="color" (colorPickerChange)="color=$event" [style.background]="color" [value]="color"/>
Any idea of what's wrong or what's missing to have it working with Ionic 2?
Thanks!
Hi, is it possible to have this open, inline vs a popup?
Main Request:
Add [cpOKButton]
(To add the "OK" button like you done for "Cancel" button).
Comments:
Bonus:
[cpOKButtonText]
(To change the text of the button)[cpOKButtonClass]
(To add the "OK" button class for design purpose)Thanks ahead and nice work!
If you want to make an http request when color is set (by click "ok" button) you actually can't because colorPickerChange
is fired anytime color is changed and not only when "ok" is clicked
I don't know if it's a smart thing to do. But in my project I have a service who's setting style settings on dynamic created components. But because of the this.colorPickerChange
event that's fired in the ngOnInit
of the color-picker.directive.ts
, the default settings are directly overwritten with the settings of the color picker directive, since I myself trigger a custom event.
changeTemplateStyle (sections: Array<string>, property: string, value: string) {
this.templateService.updateTemplateStyle(sections, property, value);
}
Whereas I think it would be better that the color picker colors aren't being changed until the color picker itself has been clicked on and a color has been selected. By removing that line, my app now runs fine and only when I open the color picker and select a new color all my other colors are updated and as my components are dynamically created.
ngOnInit() {
var hsva = this.service.stringToHsva(this.colorPicker);
if (hsva == null) {
hsva = this.service.stringToHsva(this.cpFallbackColor);
}
this.colorPickerChange.emit(this.service.outputFormat(hsva, this.cpOutputFormat));
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.