Angular 5 Color Picker Component — Be colorfully

Cornilov Dan
Sep 4, 2018 · 4 min read

Hi people! Now I am working on really interesting project. It is supposed that people can choose the color that they want to be on their profile. For solving this problem I have created a simple color picker which has 25 colors by default and has possibility to add color from HEX code. If you want to have simple, original and exceptional color picker, you’ve come to the right place. I will show how you can implement this.

First of all we should create a new component, I call it “color-picker”.

ng g c color-picker

We should declare and export this component in module.

Defining default colors

We can decrease the number of default colors, but in my case I have 25 colors.

export class ColorPickerComponent {
public defaultColors: string[] = [
'#ffffff',
'#000105',
'#3e6158',
'#3f7a89',
'#96c582',
'#b7d5c4',
'#bcd6e7',
'#7c90c1',
'#9d8594',
'#dad0d8',
'#4b4fce',
'#4e0a77',
'#a367b5',
'#ee3e6d',
'#d63d62',
'#c6a670',
'#f46600',
'#cf0500',
'#efabbd',
'#8e0622',
'#f0b89a',
'#f0ca68',
'#62382f',
'#c97545',
'#c1800b'
];
}

Our color picker should accept and return user’s picked color. For this we use Input and Output.

import { EventEmitter, Input, Output } from '@angular/core';export class ColorPickerComponent implements OnInit {
@Input() heading: string;
@Input() color: string;
@Output() event = new EventEmitter();
}

In variable “heading” it will come a title of color picker. In our example this is “Background”. Color picked by user will come in “color” variable, “event” is a new EventEmitter which returns the color selected by the user.

Creating color picker basic carcass

This is basic HTML code

<div class="color-picker">
<div class="summary-info">
<div class="info">
<p class="style">{{ heading }}</p>
<p class="style-value">{{ color }}</p>
</div>
<div class="circle"></div>
</div>
<div class="opened">
<div class="colors">
<div *ngFor="let paint of defaultColors" class="circle"></div>
</div>
<div class="hex-code">
<p>Hex Code</p>
<div class="g-input">
<input type="text" maxlength="7" [value]="color" />
</div>
</div>
</div>
</div>

Click here to view demo with HTML markup without actions and logic. Here you can find styles.

Now we should fill the circles. NgStyle directive helps us to solve this issue. We use it for both divs with class “circle” . For main circle or picked color circle we use color from variable.

<div class="circle" [ngStyle]="{'background': color}"></div><div *ngFor="let paint of defaultColors" class="circle" [ngStyle]="{'background': paint}"></div>

Creating functionality

Firstly we create variable which will open and close color picker’s dropdown section.

public show = false;

We can make directly in HTML toggle process, it is better to make this logic in javascript.

/**
* Change status of visibility to color picker
*/
public toggleColors() {
this.show = !this.show;
}

Last think is to implement this in HTML, put to div with class “summary-info” click action, and for div with class “opened” condition.

<div class="summary-info" (click)="toggleColors()">
<div class="opened" *ngIf="show">

Now when we click to summary section our dropdown section will open.

Creating logic

We have two ways of color picking. When user clicks to circle from default colors or when introduces HEX code in field. Literally, that means that we have to ensure that they use a valid HEX code, we use a simple regex. When color is changed we return “color” variable.

/**
* Change color from default colors
*
@param {string} color
*/
public changeColor(color: string) {
this.color = color;
this.event.emit(this.color); // Return color
this.show = false;
}


/**
* Change color from input
*
@param {string} color
*/
public changeColorManual(color: string) {
const isValid = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);

if (isValid) {
this.color = color;
this.event.emit(this.color); // Return color
}
}

Implement this method in our HTML template. When we click to any circle we change current color with circle’s color. If field’s value has a valid HEX code we assign new color. I use action (keydown.enter) for closing dropdown section.

<div (click)="changeColor(paint)" *ngFor="let paint of defaultColors" class="circle"
[ngStyle]="{'background': paint}"></div>
<input type="text" maxlength="7" [value]="color" (keyup)="changeColorManual(paintInput.value)" #paintInput
(keydown.enter)="toggleColors()"/>

Conclusion

This component is easy to use. We only call component and give “heading” value and “color” value.

<app-color-picker [heading]="'Background'" [color]="'#FFFFFF'"></app-color-picker>

GitHub Angular app with example.

Thanks for attention, waiting for your feedback.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade