While we render the colorpicker component in Angular-cli application shades are not applied

ColorPicker does not allow shades while rendering in the Angular-cli Application.

The gradient styles are not supported in Angular CLI. This is the known issue with bundling in angular CLI environment. Please refer to this link.

The following are the solutions to resolve this issue in your application.

Solution 1:

While using bundling, gradient styles are not applied for ColorPicker component. This issue can be resolved by using our CDN link in the application. We have CDN support for all scripts and style sheets of Syncfusion components. So, please refer to the CDN link of required CSS file in Index.html as in the following code example.

HTML/ASP

[index.html] 
 
<link href="//cdn.syncfusion.com/15.4.0.17/js/web/gradient-lime/ej.web.all.min.css" rel="stylesheet">
 

Solution 2:

Instead of bundling, move the EJ themes directly into the corresponding sample’s theme folder by following the below instructions.

Step 1:

Please insert the following code block in your “package.json” file to copy and paste the theme files into your custom folder.

Step 2:

Run the “ng build --prod” command to create the production build.

Step 3:

Run the “npm run copy-content” command to copy the theme files and paste into the destination folder.

Step 4:

Refer to the CSS file in the index.html file as in the following code example.

HTML/ASP

[index.html] 
<link href="../content/material/ej.web.all.min.css" rel="stylesheet"> 
 

Step 5:

Run the “npm install http-server -g” command to install http server globally in your system. 

Step 6:

Run the “http-server ./dist” command to host your angular CLI application. 

Please get the sample from the following location.

Sample Link:  https://www.syncfusion.com/downloads/support/directtrac/183711/ze/colorPickerCLI-69676432