md-colorpicker

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'.