ngx-colors | Angular component

More usage examples

Custom Trigger

The ngx-colors-trigger directive can be apply to any element to make a custom trigger

import { Component } from "@angular/core";

@Component({
  selector: "app-custom-trigger-example",
  templateUrl: "./custom-trigger-example.component.html",
  styleUrls: ["./custom-trigger-example.component.scss"],
})
export class CustomTriggerExampleComponent {
  constructor() {}

  input1: string = "#00897B";
}

Hide some parts of the component

You can hide the text input or the Color Picker if want. try playing with the toggles here.

Hide text input

Hide color picker

HTML

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-hide-elements-example",
  templateUrl: "./hide-elements-example.component.html",
  styleUrls: ["./hide-elements-example.component.scss"],
})
export class HideElementsExampleComponent {
  constructor() {}

  colorPickerControls: "default" | "only-alpha" | "no-alpha" = "default";
  hideColorPicker: boolean = true;
  hideTextInput: boolean = true;
  color: string = "#EC407A";
}

Custom palette (simple)

You can provide your own palette with the parameter palette

Try adding new colors to the palette using the color picker

Current Palette:[ { "preview": "#9c27b0e0", "variants": [ "#9c27b0", "#9c27b0de", "#9c27b0bd", "#9c27b09c", "#9c27b075", "#9c27b047" ] }, "#00BCD4", "#03A9F4", "#B2F35C" ]

HTML

<div style="display:flex">
    <ngx-colors 
        ngx-colors-trigger 
        [palette]="colorPalette" 
        [(ngModel)]="selectedColor" 
        [hideColorPicker]="true" 
        [hideTextInput]="true"
    >
    </ngx-colors>
    <span style="margin-left:10px;line-height: 33px;">
        Current Palette:{{colorPalette | json}}
    </span>
</div>

<div style="display: flex;">
    <div style="margin:5px 10px 5px 0px">
        <ngx-colors ngx-colors-trigger [(ngModel)]="colorToAdd"></ngx-colors></div>
    <div>
        <button mat-raised-button color="primary" (click)="addToPalette()">Add to palette</button>
    </div>
</div>

Change label for the accept/cancel button

You can change the text of the accept/cancel button above the color picker using the attribute acceptLabel/cancelLabel.

Using the validator on Reactive Forms

This library provides a validator to check if a string is a valid color. Try putting a incorrect color.

HTML