I am using ngx-color plugin of Angular. So my goal is to make the color picker look like this the below picker (checker grid) if no color is selected. Means by default this is what I want to show to user. Is it possible?
My code
<input class="color-input" [(colorPicker)]="selectedColor"
[style.background]="selectedColor" (cpSliderDragEnd)="changeColor()">
You can use the ngClass to use conditional class to your component. When you have no selectedColor, you set a class that will have the configurations you need to achieve that look like your example.
Example: Html:
<input class="color-input" [ngClass]="{ 'no-color': selectedColor == null }" [(colorPicker)]="selectedColor"
[style.background]="selectedColor" (cpSliderDragEnd)="changeColor()">
CSS:
.no-color {
background: white;
background-image: 'path-to-image';
.
.
.
}