https://github.com/dolanmiu/ng-color
Simple Angular color picker components which follow Angular best practices. No Frills.
https://github.com/dolanmiu/ng-color
angular angular2 color color-picker colour component ng ng-color ng2 ngx picker
Last synced: 18 days ago
JSON representation
Simple Angular color picker components which follow Angular best practices. No Frills.
- Host: GitHub
- URL: https://github.com/dolanmiu/ng-color
- Owner: dolanmiu
- Created: 2017-03-01T12:05:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-25T22:26:35.000Z (over 6 years ago)
- Last Synced: 2025-07-05T23:42:01.310Z (3 months ago)
- Topics: angular, angular2, color, color-picker, colour, component, ng, ng-color, ng2, ngx, picker
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/ng-color-demo
- Size: 529 KB
- Stars: 12
- Watchers: 2
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# ng-color
> Simple embeddable color picker components for Angular following best Angular practices, and good coding standards for easy use and easy contribution.
Color picker components for Angular 2+
---
[![Chat on Gitter][gitter-image]][gitter-url]
[![Build Status][travis-image]][travis-url]
[![code style: prettier][prettier-image]][prettier-url]
## Demos
#### StackBlitz
https://stackblitz.com/edit/ng-color-demo
#### Run example folder locally (mac/unix only)
1. `npm install`
2. `npm run build`
3. `npm start`
4. Go to `http://localhost:8080/`
## Installation
To install this library, run:
```bash
$ npm install ng-color --save
```
## How to use
To use this library in your `AppModule`:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { NgColorModule } from 'ng-color';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
NgColorModule, // Inlude in @NgModule
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
Once your library is imported, you can use the component in your Angular application shown below.
### Color Pickers
#### Box
What it looks like is shown in the header
```html
```
```html
```
#### Circle
What it looks like is shown in the header
```html
```
```html
```
#### NgModel and setting the initial color
The `ngModel` is of the following format. You can use two-way or one-way binding:
```ts
export interface ColorOutput {
rgb: Rgb;
hex: number;
hexString: string;
hsl: Hsl;
}
```
Or equivalently:
```ts
export interface ColorOutput {
rgb: {
red: number; // 0 - 255
green: number; // 0 - 255
blue: number; // 0 - 255
};
hex: number; // 0 - 16777215
hexString: string; // #000000 - #ffffff
hsl: {
hue: number; // 0 - 360
saturation: number; // 0 - 100
lightness: number; // 0 - 100
};
}
```
Setting these partially also works, this library will resolve all the other components out on the next change detection cycle.
Therefore, you can set the **initial color** of the picker by doing:
```ts
this.myColor = {
hexString: '#ff56d3',
};
```
In the `html`:
```html
```
## Development
To build using `ng-packagr`:
```bash
$ npm run build
```
To lint all `*.ts` files:
```bash
$ npm run lint
```
## License
MIT © [Dolan Miu](mailto:dolan_miu@hotmail.com)
Made with 💖 by Dolan Miu 🍆 💦 😝
[gitter-image]: https://badges.gitter.im/dolanmiu/ng-color.svg
[gitter-url]: https://gitter.im/ng-color/Lobby
[travis-image]: https://travis-ci.org/dolanmiu/ng-color.svg?branch=master
[travis-url]: https://travis-ci.org/dolanmiu/ng-color
[prettier-image]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg
[prettier-url]: https://github.com/prettier/prettier