md-colorpicker v0.0.1-alpha.1

md2-colorpicker

Native Angular2 Material Colorpicker directive

API

Example:

//HTML

<md-colorpicker [(ngModel)]="color" 
               position="bottom" 
               (change)="change($event)">
</md-colorpicker>

//app-module.ts

import {ColorpickerModule} from 'md-colorpicker/colorpicker';

@NgModule({
 imports: [
   ColorpickerModule,
 ],
 declarations: [
   ...
 ]  
})

//component.ts
...

@Component({
 selector: "...",
 templateUrl: 'component.html'
})

export class ... {
   
   ...
   
   private color: string = "#123456";

   private change(value) { 
     ...
   }

   ...

}

Properties

• [(ngModel)] - string - (Default: #000)- Two way data binding - It would be 'value' of color.
• [position] - string - (Default: bottom)(Optional) - position of colorpicker dialog, supported positions: 'right', 'left', 'top', 'bottom'.
• [format] - string - (Default: hex)(Optional) - color format, supported formats: 'hex', 'rgba', 'hsla'.