10+ Angular 2 Color Pickers Examples

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

Angular2 Color Picker Directive
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.

Website Code Demo

2. ng2 Color Picker Module

ng2 Color Picker Module
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.

Article Code

3. Angular 2 Logo Color Designer

Angular 2 Logo Color Designer
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.

Website Code Demo

4. MiniColors Colorpicker directive for AngularJS

MiniColors Colorpicker directive for AngularJS
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.

Demo

5. ngjs Color Picker

ngjs Color Picker
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.

Article Code

6. aCKolor – Color Picker for Angular

aCKolor - Color Picker for Angular
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.

Code Demo

7. Angular ColorPicker

Angular ColorPicker
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).

Website Code

8. Angular Foundation Color Picker Example

Angular Foundation Color Picker Example
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’])

Code Demo

9. ng-picky Pick Color

ng-picky Pick Color
ng-picky Pick Color

A straight up Angular color picker. No jQuery/Bootstrap dependencies.

Demo

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *