Do something before open

[MelanieW97]

Hey there,

would it be possible to do something before the open event triggers? I mean ... before the panel is opened. I would like to do an api call only if the user really opens the color picker. I cannot figure out how to do that if it's even possible. I can only see an open event which returns the current color. Manipulating the color palette does not change the color palette being displayed because the panel is already being opened up with the old value.

Thanks in advance,

[MelanieW97]

Just in case someone needs something like that as well. Currently, I have a workaround for that. I hope it won't be broken someday as long as there's no other solution for that.

@ViewChild(NgxColorsTriggerDirective) ngxTrigger: NgxColorsTriggerDirective;

// ...

// function for open EventEmitter of ngx-colors html element => (open)="openPanel()"
openPanel() {
  this.ngxTrigger.closePanel(); // close panel immediately

  // ... do something
  this.ngxTrigger.openPanel(); // open panel yourself
}

[KroneCorylus]

Hi @MelanieW97
At the moment, I'm not planning on adding a pre-open trigger because I cant think of many use cases for it. Could you share more about your specific need for this feature? Understanding your use case better might help me reconsider. Thanks in advance!

[MelanieW97]

Hi @KroneCorylus, I've got plenty of color pickers on one page. Each of them can have a different palette. In order not to call all APIs on init of the component that includes the color pickers, I decided to call the palette API on open. Might not be the use case for a lot of people. I'm glad I found a workaround for me. I just fear it might not work one day. Then I'd have to wrap the color picker in a component I can control - or something like that.

[KroneCorylus]

I’ve thought about it, and I think the best way to handle this is to make ngx-colors accept an observable for the palette. This would let us show a loading indicator while fetching the palette, so the color picker stays responsive and doesn’t feel sluggish waiting for the data.

I don’t think I would ever remove the methods openPanel and closePanel used in your workaround, so I think you’re safe. But once the solution I’m proposing is implemented, I’d recommend switching to it for a better experience.

Thanks for taking the time to explain your use case.

[MelanieW97]

Thank you so much. That sounds great. ❤️