nxt-components
Github

Angular color picker

GitHub license  npm  scope

A color picker widget for Angular with no dependencies.


Demo

Basic usage

View on GitHub
<input class="form-control"
    [style.background]="color"
    [(nxtColor)]="color" />
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-basic-example',
    templateUrl: './basic-example.component.html',
    styleUrls: ['./basic-example.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class BaicExampeComponent {
    color = '#2889e9'
}

Grayscale color mode

View on GitHub
<input class="form-control"
    [style.background]="color"
    [(nxtColor)]="color"
    mode="grayscale" />

Show the color in the input field

View on GitHub
<input class="form-control"
    [value]="color"
    [style.background]="color"
    [style.color]="picker.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker="nxtColorPicker"
    [(nxtColor)]="color" />

Output format

View on GitHub

<input class="form-control"
    [value]="color1"
    [style.background]="color1"
    [style.color]="picker1.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker1="nxtColorPicker"
    outputFormat="rgba"
    [(nxtColor)]="color1" />
<br>
<input class="form-control"
    [value]="color2"
    [style.background]="color2"
    [style.color]="picker2.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker2="nxtColorPicker"
    outputFormat="hsla"
    [(nxtColor)]="color2" />

Changing dialog position

View on GitHub
<input class="form-control"
    [value]="color"
    [style.background]="color"
    [style.color]="picker.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker="nxtColorPicker"
    position="bottom"
    [(nxtColor)]="color" />

Dialog offset

View on GitHub

You can introduce a offset of the color picker relative to the html element

Change me!
<span [style.color]="color"
    class="change-me"
    position="bottom"
    [positionOffset]="0.5"
    [(nxtColor)]="color">Change me!</span>
.change-me {
    cursor: pointer;
    font-size: 30px;
    font-weight: bolder;
}

Show cancel button

View on GitHub
<input class="form-control"
    [value]="color"
    [style.background]="color"
    [style.color]="picker.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker="nxtColorPicker"
    [cancelButton]="true"
    [(nxtColor)]="color" />

Show OK button

View on GitHub
<input class="form-control"
    [value]="color"
    [style.background]="color"
    [style.color]="picker.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker="nxtColorPicker"
    [okButton]="true"
    [saveClickOutside]="false"
    [(nxtColor)]="color" />

Change color event

View on GitHub
cmyk(90,0,83,62)
CMYK
<input class="form-control"
    [style.background]="rgbColor"
    [nxtColor]="rgbColor"
    [cmykEnabled]="true"
    (cmykColorChange)="cmykValue = $event; cmykColor = onChangeColorCmyk($event)"
    (nxtColorChange)="rgbColor = $event" />
<div>{{ cmykValue }}</div>
<div class="cmyk-container">
    <span class="cmyk-text"
        style="color: rgb(0,255,255);"
        [style.font-size.px]="96 * cmykColor.c">C</span>
    <span class="cmyk-text"
        style="color: rgb(255,0,255)"
        [style.font-size.px]="96 * cmykColor.m">M</span>
    <span class="cmyk-text"
        style="color: rgb(255,255,0)"
        [style.font-size.px]="96 * cmykColor.y">Y</span>
    <span class="cmyk-text"
        style="color: rgb(0,0,0)"
        [style.font-size.px]="96 * cmykColor.k">K</span>
</div>
.cmyk-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 144px;
}
 
.cmyk-text {
    width: 72px;
    font-weight: bolder;
    line-height: 72px;
    text-align: center;
    text-shadow: 1px 1px 2px #bbb;
    vertical-align: middle;
}
import { Component, ViewEncapsulation } from '@angular/core'
import { Cmyk, formatCmyk, stringToCmyk } from 'nxt-color-picker'
 
@Component({
    selector: 'app-change-event',
    templateUrl: './change-event.component.html',
    styleUrls: ['./change-event.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class ChangeEventComponent {
    rgbColor = '#0a6211'
    cmykColor = stringToCmyk(this.rgbColor)!
    cmykValue = formatCmyk(this.cmykColor, 'enabled')
 
    onChangeColorCmyk(color: string) {
        const cmyk = stringToCmyk(color)
        return cmyk || new Cmyk(0, 0, 0, 0, 1, true)
    }
}

Preset colors

View on GitHub
<input class="form-control"
    [style.background]="color"
    [presetColors]="preset"
    [(nxtColor)]="color" />
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-color-preset',
    templateUrl: './color-preset.component.html',
    styleUrls: ['./color-preset.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class ColorPresetComponent {
    color = '#f2ff00'
 
    preset = [
        '#fff',
        '#000',
        '#2889e9',
        '#e920e9',
        '#fff500',
        'rgb(236,64,64)'
    ]
}

Add and remove preset colors

View on GitHub
<input class="form-control"
    [style.background]="color"
    alphaChannel="always"
    outputFormat="rgba"
    [(presetColors)]="preset"
    [presetColorsEditable]="true"
    [maxPresetColors]="6"
    [(nxtColor)]="color" />
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-manage-preset',
    templateUrl: './manage-preset.component.html',
    styleUrls: ['./manage-preset.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class ManagePresetComponent {
 
    color = 'rgba(0,255,0,0.5)'
 
    preset = [
        '#fff',
        '#2889e9'
    ]
}

Use toggle with ignoredElements

View on GitHub



Toggle status: false
<input class="form-control"
    #ignoredInput
    [style.background]="color"
    fallbackColor="#f200bd"
    [ignoredElements]="[ignoredButton, ignoredInput]"
    [(toggle)]="toggle"
    [(nxtColor)]="color" />
<br>
<button #ignoredButton
    class="btn btn-primary"
    (click)="toggle =! toggle;">Toggle</button>
<br><br>
<strong>Toggle status: {{ toggle }}</strong>
import { Component, ViewEncapsulation } from '@angular/core'

@Component({
    selector: 'app-toggle-button',
    templateUrl: './toggle-button.component.html',
    styleUrls: ['./toggle-button.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class ToggleButtonComponent {
    color = '#f200bd'
    toggle = false
}

Change alpha channel behavior

View on GitHub



<input class="form-control"
    [value]="color1"
    [style.background]="color1"
    [style.color]="picker1.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker1="nxtColorPicker"
    alphaChannel="always"
    outputFormat="rgba"
    [(nxtColor)]="color1" />
<br>
<input class="form-control"
    [value]="color2"
    [style.background]="color2"
    [style.color]="picker2.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker2="nxtColorPicker"
    alphaChannel="disabled"
    outputFormat="rgba"
    [(nxtColor)]="color2" />
<br>
<input class="form-control"
    [value]="color3"
    [style.background]="rgbaText"
    [style.color]="picker3.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker3="nxtColorPicker"
    alphaChannel="always"
    outputFormat="hex"
    [nxtColor]="color3"
    (nxtColorChange)="rgbaText = onChangeColorHex8($event); color3 = $event" />
<br>
<input class="form-control"
    [value]="color4"
    [style.background]="color4"
    [style.color]="picker4.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker4="nxtColorPicker"
    alphaChannel="forced"
    outputFormat="hex"
    [(nxtColor)]="color4" />
import { Component, ViewEncapsulation } from '@angular/core'
import { formatOutput, stringToHsva } from 'nxt-color-picker'

@Component({
    selector: 'app-alpha-channel',
    templateUrl: './alpha-channel.component.html',
    styleUrls: ['./alpha-channel.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class AlphaChannelComponent {
    color1 = 'rgb(0,255,255)'
    color2 = 'rgba(0,255,0,0.5)'
    color3 = '#a51ad633'
    color4 = 'rgb(255,0,0)'

    rgbaText = this.onChangeColorHex8(this.color3)

    onChangeColorHex8(color: string) {
        const hsva = stringToHsva(color, true)

        if (hsva) {
            return formatOutput(hsva, 'rgba')
        }

        return ''
    }
}

Show the dialog permanently

View on GitHub
Hex
<div>
    <ng-container dialogDisplay="inline"
        [cancelButton]="true"
        [(nxtColor)]="colors[selectedColor]"></ng-container>
</div>
<div>
    <div *ngFor="let color of colors; index as i"
        class="color-box"
        [style.background]="color"
        (click)="selectedColor = i"></div>
</div>
:host {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-around;
}

.color-box {
    width: 100px;
    height: 24px;
    cursor: pointer;
}

.color-box + .color-box {
    margin-top: 16px;
}
import { Component, ViewEncapsulation } from '@angular/core'

@Component({
    selector: 'app-as-component',
    templateUrl: './as-component.component.html',
    styleUrls: ['./as-component.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class AsComponentComponent {
    colors = [
        '#2883e9',
        '#e920e9',
        'rgb(255,245,0)',
        'rgb(236,64,64)',
        'rgba(45,208,45,1)'
    ]
    selectedColor = 0
}