{"id":13480992,"url":"https://github.com/Alberplz/angular2-color-picker","last_synced_at":"2025-03-27T11:31:25.189Z","repository":{"id":58246242,"uuid":"52576714","full_name":"Alberplz/angular2-color-picker","owner":"Alberplz","description":"Angular 2 Color Picker Directive, no dependences required. ","archived":false,"fork":false,"pushed_at":"2018-01-02T18:14:16.000Z","size":2006,"stargazers_count":185,"open_issues_count":52,"forks_count":82,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-13T00:30:21.363Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"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/Alberplz.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-26T03:45:24.000Z","updated_at":"2024-05-20T16:32:56.000Z","dependencies_parsed_at":"2022-08-31T00:21:48.788Z","dependency_job_id":null,"html_url":"https://github.com/Alberplz/angular2-color-picker","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alberplz%2Fangular2-color-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alberplz%2Fangular2-color-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alberplz%2Fangular2-color-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alberplz%2Fangular2-color-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alberplz","download_url":"https://codeload.github.com/Alberplz/angular2-color-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245836124,"owners_count":20680328,"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.408Z","updated_at":"2025-03-27T11:31:24.901Z","avatar_url":"https://github.com/Alberplz.png","language":"TypeScript","funding_links":[],"categories":["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)","Uncategorized","UI Components"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Uncategorized","Form"],"readme":"# angular2-color-picker\nAngular 2 Color Picker Directive/Component with no dependencies required.\u003cbr /\u003e\nThis is a Color Picker Directive/Component for Angular 2.\n\n# Demo page\nhttp://alberplz.github.io/angular2-color-picker/examples/index.html\n\n# Installation\n```bash\nnpm i --save angular2-color-picker\n```\n\n# Usage\n* Use it in your HTML elements, for example:\n```html\n\u003cinput [(colorPicker)]=\"color\" [style.background]=\"color\" [value]=\"color\"/\u003e\n```\n* Or:\n```html\n\u003cinput [colorPicker]=\"color\" (colorPickerChange)=\"color=$event\" [style.background]=\"color\" [value]=\"color\"/\u003e\n```\n\n* Add ColorPickerModule in your app.module.ts:\n```javascript\nimport {ColorPickerModule} from 'angular2-color-picker';\n\n@NgModule({\n    ...\n    imports: [ColorPickerModule]\n})\n\n```\n* Set color the variable. You can use ColorPickerService in your component if you want extra functions.\n```javascript\nimport {Component} from '@angular/core';\nimport {ColorPickerService} from 'angular2-color-picker';\n\n@Component({\n    selector: 'my-app',\n    templateUrl: 'app/demo.html'\n})\n\nexport class AppComponent {\n    private color: string = \"#127bdc\";\n    constructor(private cpService: ColorPickerService) {\n    }\n}\n```\n* Configure system.config.js\n```javascript\nvar map = {\n        ...    \n        'angular2-color-picker': 'node_modules/angular2-color-picker'\n    };\nvar packages = {\n        ...\n        'angular2-color-picker': {main:'index.js', defaultExtension: 'js'}\n    };\n```\n#Build\n```bash\ngit clone https://github.com/Alberplz/angular2-color-picker.git\nnpm install\ncd agular2-color-picker\nnpm run build\ngulp copylib\n```\n\n#Options\nDefault option is the first item.\n```html\n[cpOutputFormat]=\"'hex', 'rgba', 'hsla'\"\n[cpPosition]=\"'right', 'left', 'top', 'bottom'\"\n[cpPositionOffset]=\"'0%'\"\n[cpPositionRelativeToArrow]=\"false, true\"\n[cpWidth]=\"'230px'\"\n[cpHeight]=\"'auto'\"\n[cpSaveClickOutside]=\"true, false\"\n[cpOKButton]=\"false, true\"\n[cpOKButtonClass]=\"''\"\n[cpOKButtonText]=\"'OK'\"\n[cpCancelButton]=\"false, true\"\n[cpCancelButtonClass]=\"''\"\n[cpCancelButtonText]=\"'Cancel'\"\n[cpFallbackColor]=\"'#fff'\"\n[cpPresetLabel]=\"'Preset colors'\"\n[cpPresetColors]=\"[]\", e.g: \"['#fff', '#000']\"\n[cpToggle] = \"false, true\"\n[cpIgnoredElements]=\"[]\"\n[cpDialogDisplay]=\"'popup,' 'inline'\"\n[cpAlphaChannel]=\"'hex6', 'hex8', 'disabled'\"\n```\n\n#Extra content\nIf you want to change precalculated images for color picker sliders, you can find a little script in this project:\nhttps://github.com/Alberplz/angular-colorpicker-directive\n\n#Tested in:\n* Chrome\n* Firefox\n* Microsoft Edge\n* Opera\n* Safari\n* Internet Explorer\n\n#For previous version of Angular:\nhttps://github.com/Alberplz/angular-colorpicker-directive","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlberplz%2Fangular2-color-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAlberplz%2Fangular2-color-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlberplz%2Fangular2-color-picker/lists"}