md-color-menu (Angular Material Color Picker)

Simple color picker based on Angular Material. Colors are pre-defined by the Material Design Color Palette. Try out the Demo.

Install

Download and install with bower:

bower install md-color-menu --save

Add exported CSS and Javascript:

<link rel="stylesheet" href="bower_components/md-color-menu/md-color-menu.css" />
<script src="bower_components/md-color-menu/md-color-menu.js"></script>

Add the module to your Angular dependencies:

angular.module('myApp', ['mdColorMenu'])

Usage

Define a color on your $scope:

angular
  .module('myApp')
  .controller('Controller', function ($scope, mdPickerColors) {
    $scope.color = mdPickerColors.getColor('#D32F2F'); // pick red as default color
  });

Pass color to <md-color-menu> directive and optionally watch for changes:

<md-color-menu color="color">
  <md-button ng-style="color.style">Change my color</md-button>
</md-color-menu>