A color picker can really bring your web application to life. Bright colors are worth a thousand words at least that’s what they say. Color picker tools are usually pretty simple to use and display both hex and rgb values so your users can select the color they want directly from the color pallete, swatch or scheme or even enter their own specific values to find the color they’re looking for.
Here are about 10 Angular 2 Color Pickers Examples to help you get started. Enjoy!
1. Angular2 Color Picker Directive
Color Picker directive for Angular 2 with no extra dependencies. This is a Color Picker Directive/Component for Angular 2. Tested is lots of different browsers including Chrome, Firefox, Microsoft Edge, Opera, Safari and Internet Explorer.
2. ng2 Color Picker Module
Once the module is installed, you will need to add HTML markup to include the picker in a component. The 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.
3. Angular 2 Logo Color Designer
Play with Angular’s logo colors. You can run it on a development server locally to test it and it also has spec level unit tests written. Run ng test to execute the unit tests via Karma. Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.
4. MiniColors Colorpicker directive for AngularJS
Works with Bootstrap 3 and also on mobile devices like iPad and iPhone. Works with Bootstrap 3 and works fine with mobile browsers such as Safari on iPad. Feel free to look at this source code to get a feel for how easy it is to use this directive.
5. ngjs Color Picker
A small directive which essentially is a color picker but with a few extra functions – for AngularJS. This one has lots of options and examples for you to play around with different settings. Features include: Customize the appearance of the color picker (vertical, horizontal, columns etc.), Generate random colors, Generate gradient colors.
6. aCKolor – Color Picker for Angular
The a-ckolor directive creates an input that will be bound to the color string(via ngModel). By default, it’s a hidden input, but can be defined using the type attribute. The input is wrapped in an element (’.c-ckolor__input-wrapper’) that when clicked, opens up the color wheel.
7. Angular ColorPicker
Angular-ColorPicker is a simple directive made purely in angualr.js It lets the user choose a color from a list of colors you set in a pop-over window. The directive receives 3 parameters: color: two way binding for the selected color, options: string array with color defintions in it, any valid css color representation works. onColorChanged: a method that will be called when the color changes, method should look like onColorChanged(newColor, oldColor).
8. Angular Foundation Color Picker Example
Native AngularJS color picker directive for Foundation Zurb. Copy css/colorpicker.css and js/foundation-colorpicker-module.js. Add a dependency to your app, for instance: angular.module(‘myApp’, [‘myApp.filters’, ‘myApp.services’, ‘myApp.directives’, ‘myApp.controllers’, ‘colorpicker.module’])
9. ng-picky Pick Color
A straight up Angular color picker. No jQuery/Bootstrap dependencies.