API reference for @angular-material-components/color-picker

Getting started

{{code1}}

Setup

{{code2}}

Properties @Input

Name Type Default value Description
disabled
boolean null

If true, the picker is readonly and can't be modified

touchUi
boolean false

Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather than a popup and elements have more padding to allow for bigger touch targets.

Choosing color format settings to display in input

The color-picker use NGX_MAT_COLOR_FORMATS by default.

You can also customize the color format by providing your custom MAT_COLOR_FORMATS in your module.

For example:
{{code4}}

Theming

@see @angular/material Using a pre-built theme

Add the Material Design icon font to your index.html

{{code5}}
HEX: {{colorCtr.value?.hex}}
RGBA: {{colorCtr.value?.rgba}}
disabled (Default: false) {{option.label}}
touchUi (Default: false) {{option.label}}
{{code3}}