Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Proposal: remove this.colorPickerChange from the directive in ngOnInit()

See original GitHub issue

Issue Description

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));

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:3
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

no-morecommented, Dec 28, 2016


I think I have the same issue, change event is triggered when my components init, and so I mark my form as dirty by error. It would be great to not trigger the event on input changes or at least not on creation.


wartabcommented, Jun 25, 2017

@renaudaste angular2-color-picker is not maintained anymore. Use this instead:

It is a drop in replacement for this package and should work out of the box with bug fixes and added features. Should your use case not be covered yet in it, feel free to report it there.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Proposal: remove this.colorPickerChange from the directive in ...
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...
Read more >
colorPickerChange and initialization · Issue #34 - GitHub
Proposal : remove this.colorPickerChange from the directive in ngOnInit() Alberplz/angular2-color-picker#37 · colorPickerChange fired on ...
Read more >
OnInit - Angular
A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive. Define an ngOnInit() method to handle any...
Read more >
How to remove a component using directives in Angular 2
I use a directive and an ng-template. Please see my code below. viewunit.html <div class="col-md-9"> ...
Read more >
Creating and Unit Testing a Theme Switcher Directive in Angular
A few popular solutions proposed were: ... Then in the ngOnInit() hook we subscribe to the selected theme and call this method.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found