Socket
Socket
Sign inDemoInstall

ngx-colors

Package Overview
Dependencies
8
Maintainers
1
Versions
49
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-colors

A beautiful color picker for angular that let you choose from a color palette, using sliders (Hue, Lightness, Alpha sliders) or through text input(hex, rgba, hsla)


Version published
Maintainers
1
Weekly downloads
16,908
decreased by-4.25%

Weekly downloads

Readme

Source

size download

ngx-colors

ngx-colors is a colorpicker component of angular with a material design style, allows users to select a color via text input (hexadecimal, rgba, hsla), choosing a preset color from the palette, or a color picker using the Hue, Lightness, and Alpha sliders.

Demo and documentation

https://ngx-colors.web.app/

Preview

example gif

Installation

Compatibility
AngularLatest ngx-colors compatible
15Latest
143.1.4
133.1.4
123.0.5
113.0.5
103.0.5
Npm
npm install ngx-colors
Load the ngx-colors module in your app module:
import { NgxColorsModule } from 'ngx-colors';

@NgModule({
  ...
  imports: [
    ...
    NgxColorsModule
  ]
})

Overview and usage

This library is composed of two parts:

  1. ngx-colors-trigger: This directive can be applied to any html element turning it into a trigger that when clicked will open the color picker
  2. ngx-colors: This component is a premade button that will display the selected color.
Use it in your HTML template with ngModel:
<ngx-colors ngx-colors-trigger [(ngModel)]="color"></ngx-colors>
Or with Reactive Forms:
<form class="example-form">
  <ngx-colors
    ngx-colors-trigger
    style="display: inline-block; margin:5px;"
    [formControl]="colorFormControl"
  ></ngx-colors>
</form>

Keywords

FAQs

Last updated on 08 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc