Angular 17 - Standalone, NCF, Signals

[Sergiobop]

Hi!

First of all, thank you for this package, awesome work.

Do you have plans to upgrade the project to Angular 17? If you do..

• Will you swap to the new control flow?
• Will you use standalone components for the different pickers instead of one module?
• Will you use signals when possible? I think you can simplify the code a lot

I think this lib has the potential to become the best color picker in Angular.

Thanks again

[pIvan]

Hi @Sergiobop,

Thank you!

First, I'll start by migrating the project to Angular 17, which will probably mean a new control flow. I've been considering standalone components for some time. However, currently, I'm finalizing some adjustments on color conversions to set RGBA for the base color, and all other colors will be derived from it. Additionally, I might wait a bit longer before using signals, possibly implementing them within the component itself. After that, I may consider redesigning the public part of the API.

[Sergiobop]

Hi @pIvan , thank you for your fast response. I agree on the signals change.

Standalone however, would be a great improvement. For example, i just use the chrome picker inside a cdkOverlay component, and i have to import all the components right now with the module.

If you allow me, I would also suggest some improvements in the chrome picker, like a new input to set the selectedPresentation. In my apps, the users are used to the "HEX" colors, and right now it always start on RGBA mode

Thanks!

[pIvan]

Thank you, "selectedPresentation" will be one of the new features.

[pIvan]

Hi @Sergiobop,

a new versions (17.0.0 and 17.1.0) of the library are available, which are compatible with Angular 17. Additionally, all components are standalone, and a new control flow has been implemented. The implementation of signals remains as a new feature. Furthermore, there have been minor adjustments made here to facilitate easier message localization through configuration using the COLOR_PICKER_CONFIG injection token.

[Sergiobop]

Wow, that was fast,

Thanks a lot @pIvan

[Sergiobop]

Hi again @pIvan

I'm having some trouble implementing my component with the standalone ChromePickerComponent.

In my standalone component i import the ChromePickerComponent and this error shows:

NullInjectorError: R3InjectorError(Standalone[MyCustomComponent])[ColorPickerConfig -> ColorPickerConfig -> ColorPickerConfig -> ColorPickerConfig -> ColorPickerConfig]: 
  NullInjectorError: No provider for ColorPickerConfig!

I tried adding the code you have in the DEMO:

@Injectable()
class ColorPickerConfiguration implements IColorPickerConfig {
  public presetsTitle: string = '{0}. Long-click to show alternate shades.'; // {0} is the place where hex value will be placed
  public get indicatorTitle(): string {
    return 'Copy color to clipboard';
  }
}

And in my providers of the component added:

  providers: [{ provide: COLOR_PICKER_CONFIG, useClass: ColorPickerConfiguration }],

The error is still there

For now i'm still using the module.

[pIvan]

Hi @Sergiobop, thank you for the bug report. I just identified the issue—I made a mistake by leaving providers under the module definition. Consequently, when the component is used separately, there are no providers available.

[pIvan]

With version 17.1.1. you can try to do something like You tried or something like this

bootstrapApplication(
    AppComponent, {
    providers: [
        { provide: COLOR_PICKER_CONFIG, use... } or importProvidersFrom(ColorPickerModule)
    ]
});

[elementalTIMING]

I ran into the same problem but wasn't able to find a solution yet. Do you have a quick fix to get the ColorPicker make running again?

[pIvan]

I ran into the same problem but wasn't able to find a solution yet. Do you have a quick fix to get the ColorPicker make running again?

Hi @elementalPRESS, which version do you use?

[elementalTIMING]

I ran into the same problem but wasn't able to find a solution yet. Do you have a quick fix to get the ColorPicker make running again?

Hi @elementalPRESS, which version do you use?

I'm using the latest version and Angular 17.0.8

[pIvan]

I ran into the same problem but wasn't able to find a solution yet. Do you have a quick fix to get the ColorPicker make running again?

Hi @elementalPRESS, which version do you use?

I'm using the latest version and Angular 17.0.8

Can you try 17.1.1 with an example of code a few lines above

[elementalTIMING]

Can you try 17.1.1 with an example of code a few lines above

maybe a stupid question, but where did you get v17.1.1 from? The current Angular release is at 17.0.8 (https://github.com/angular/angular/releases)

[pIvan]

I think we misunderstood each other. What version of this library are you using? And is the entire project configured as standalone components, or are there parts that are modules?

Does your application's bootstrap look something like this?

bootstrapApplication(
    AppComponent, {
    providers: [
        { provide: COLOR_PICKER_CONFIG, use... } or importProvidersFrom(ColorPickerModule)
    ]
});

[elementalTIMING]

I think we misunderstood each other. What version of this library are you using? And is the entire project configured as standalone components, or are there parts that are modules?

Ahhhh :-) It's a module.

Does your application's bootstrap look something like this?

bootstrapApplication(
    AppComponent, {
    providers: [
        { provide: COLOR_PICKER_CONFIG, use... } or importProvidersFrom(ColorPickerModule)
    ]
});

I don't have something like this. I just have it in my module imports and use it very plain without any special configurations:

@NgModule({
    imports: [CommonModule, FormsModule, ColorPickerModule, ...],
    declarations: [...],
    exports: [...],
})
export class TextDesignerModule {}

In the template:

<sketch-picker class="sketch-picker" [(color)]="color" (colorChange)="changeValue($event)"></sketch-picker>

[pIvan]

And what is the exact error you are getting? Can you paste the log and an example component where you are using this template?

[elementalTIMING]

And what is the exact error you are getting? Can you paste the log and an example component where you are using this template?

NullInjectorError: R3InjectorError(ScoreboardModule)[ColorPickerConfig -> ColorPickerConfig -> ColorPickerConfig -> InjectionToken COLOR_PICKER_CONFIG -> InjectionToken COLOR_PICKER_CONFIG]: 
  NullInjectorError: No provider for InjectionToken COLOR_PICKER_CONFIG!
    at NullInjector.get (core.mjs:5626:27)
    at R3Injector.get (core.mjs:6069:33)
    at R3Injector.get (core.mjs:6069:33)
    at injectInjectorOnly (core.mjs:911:40)
    at Module.ɵɵinject (core.mjs:917:60)
    at Object.ColorPickerConfig_Factory [as factory] (iplab-ngx-color-picker.mjs:820:103)
    at core.mjs:6189:43
    at runInInjectorProfilerContext (core.mjs:867:9)
    at R3Injector.hydrate (core.mjs:6188:17)
    at R3Injector.get (core.mjs:6058:33)
handleError @ error.interceptor.ts:43
next @ core.mjs:32328
next @ Subscriber.js:91
_next @ Subscriber.js:60
next @ Subscriber.js:31
(anonymous) @ Subject.js:34
errorContext @ errorContext.js:19
next @ Subject.js:27
emit @ core.mjs:14310
(anonymous) @ core.mjs:14749
invoke @ zone.js:368
run @ zone.js:129
runOutsideAngular @ core.mjs:14619
onHandleError @ core.mjs:14749
handleError @ zone.js:372
runGuarded @ zone.js:142
api.microtaskDrainDone @ zone.js:1054
drainMicroTaskQueue @ zone.js:588
invokeTask @ zone.js:487
invokeTask @ zone.js:1631
globalCallback @ zone.js:1662
globalZoneAwareCallback @ zone.js:1695

[pIvan]

Did you include the ColorPickerModule module in the ScoreboardModule?

[elementalTIMING]

Did you include the ColorPickerModule module in the ScoreboardModule?

Nope, but in the TextDesignerModule and the TextDesignerModule is imported in the ScoreboardModule. This was working for some years without any issues.

[pIvan]

Can you try version 17.1.2?

[elementalTIMING]

Can you try version 17.1.2?

Your fix works like a charm. Thank you very much!

[pIvan]

thank You! ;)