{"id":13480999,"url":"https://github.com/AndyMeps/ng2-color-picker","last_synced_at":"2025-03-27T11:31:22.862Z","repository":{"id":65424514,"uuid":"68369627","full_name":"AndyMeps/ng2-color-picker","owner":"AndyMeps","description":"Simple color picker for Angular 2","archived":false,"fork":false,"pushed_at":"2017-09-21T11:30:56.000Z","size":46,"stargazers_count":16,"open_issues_count":5,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-05T23:40:58.487Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndyMeps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-16T09:59:32.000Z","updated_at":"2022-02-06T15:50:03.000Z","dependencies_parsed_at":"2023-01-23T01:55:11.145Z","dependency_job_id":null,"html_url":"https://github.com/AndyMeps/ng2-color-picker","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndyMeps%2Fng2-color-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndyMeps%2Fng2-color-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndyMeps%2Fng2-color-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndyMeps%2Fng2-color-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndyMeps","download_url":"https://codeload.github.com/AndyMeps/ng2-color-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245836109,"owners_count":20680326,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:00:47.481Z","updated_at":"2025-03-27T11:31:22.553Z","avatar_url":"https://github.com/AndyMeps.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","UI Components"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Form"],"readme":"# No Longer Maintained\n\nI will merge pull requests but I don't have the time to actively support this now; sorry for any inconvenience.\n\n---\n\n[![npm version](https://badge.fury.io/js/ng2-color-picker.svg)](https://badge.fury.io/js/ng2-color-picker) [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) [![Dependency Status](https://www.versioneye.com/nodejs/ng2-color-picker/0.1.12/badge?style=flat-square)](https://www.versioneye.com/nodejs/ng2-color-picker/0.1.12) [![Build Status](https://travis-ci.org/AndyMeps/ng2-color-picker.svg?branch=master)](https://travis-ci.org/AndyMeps/ng2-color-picker)\n\n[![NPM](https://nodei.co/npm/ng2-color-picker.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/ng2-color-picker/)\n\n# ng2-color-picker\n\nSimple color picker for Angular 2\n\n![Screenshot open](https://raw.githubusercontent.com/AndyMeps/ng2-color-picker/master/assets/screenshot-color-picker-open.png)\n\n## Dependencies\n\nThe module relies on `ngx-bootstrap` for dropdown functionality.\n\n## Installation\n\nTo include in your project install via NPM with:\n\n```\nnpm install --save ng2-color-picker\n```\n\nYou will then need to include the module to your app.module.ts:\n\n```typescript\nimport { ColorPickerModule } from 'ng2-color-picker';\n\n// ...\n\n@NgModule({\n    imports: [\n        ColorPickerModule\n    ]\n})\n///...\n```\n\nFinally, include the component in your HTML as per the next section.\n\n## HTML Component Markup\n\nOnce the module is installed, you will need to add HTML markup to include the picker in a component.\nThe minimum requirement is an `[(ngModel)]` attribute, which should provide a string representation of a color, and an `[availableColors]` attribute, which should provide a `string[]` of available colors.\n\n```html\n\u003ccolor-picker\n    [(ngModel)]=\"color\"\n    [availableColors]=\"availableColors\"\u003e\n\u003c/color-picker\u003e\n```\n\nIt is possible to configure `ng2-color-picker` by providing a configuration object to the `[pickerConfig]` attribute (see the next section for more details on this object):\n\n```html\n\u003ccolor-picker\n    [(ngModel)]=\"color\"\n    [availableColors]=\"availableColors\"\n    [pickerConfig]=\"pickerOptions\"\u003e\n\u003c/color-picker\u003e\n```\n\n## Configuration\n\n`ng2-color-picker` exposes an interface to provide an indication of valid configuration properties, this can be referenced as a type for your configuration object by importing it:\n\n```typescript\nimport { IColorPickerConfiguration } from 'ng2-color-picker';\n```\n\nWhich can then be used as the configuration object type in your component:\n\n```typescript\npublic pickerOptions: IColorPickerConfiguration;\n```\n\nCurrent list of configuration options, types and default values:\n\n| Property | Type | Default | Description. |\n| -------- | ---- | ------- | ------------ |\n| width | `number` | 25 | Width of the picker control. |\n| height | `number` | 25 | Height of the picker control. |\n| borderRadius | `number` | 4 | Radius of the picker control border. |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAndyMeps%2Fng2-color-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAndyMeps%2Fng2-color-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAndyMeps%2Fng2-color-picker/lists"}