# @vipstorage/material-color-picker

> Angular Material Color Picker

Latest version **17.0.2** (published 2024-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vipstorage/material-color-picker
pnpm add @vipstorage/material-color-picker
yarn add @vipstorage/material-color-picker
bun add @vipstorage/material-color-picker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 17.0.2 |
| Published | 2024-01-17 |
| First published | 2024-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 408.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 345 |
| Author | HO Hong Quan |
| Maintainers | 128keaton |
| Keywords | angular, angular2, angular 12, angular 13, angular 14, angular 15, angular 16, angular 17, angular-material, angular material color picker, color-picker, colorpicker, ngx-mat, ngx-mat-color-picker, ngx-material-color-picker |

## Links

- npm: https://www.npmjs.com/package/@vipstorage/material-color-picker
- Repository: https://github.com/h2qutc/angular-material-components
- Issues: https://github.com/h2qutc/angular-material-components/issues
- npm.io page: https://npm.io/package/@vipstorage/material-color-picker

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 17.0.2 (latest) — 2024-01-17
- 17.0.1 — 2024-01-17

## README

# Angular Material Color Picker for @angular/material 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x, 15.x, 16.x

[![Build Status](https://travis-ci.com/h2qutc/angular-material-components.svg?branch=master)](https://travis-ci.com/h2qutc/angular-material-components)
[![License](https://img.shields.io/npm/l/angular-material-components.svg)](https://www.npmjs.com/package/angular-material-components)
[![npm version](https://badge.fury.io/js/%40angular-material-components%2Fcolor-picker.svg)](https://www.npmjs.com/package/@angular-material-components/color-picker)

## Description

An Angular Material Color Picker.

<a href="https://www.buymeacoffee.com/h2qutc" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

## DEMO

@see [DEMO stackblitz](https://stackblitz.com/edit/demo-ngx-mat-color-picker)

![Alt Text](demo_color_picker.png)

Choose the version corresponding to your Angular version:

 Angular     | @angular-material-components/color-picker
 ----------- | -------------------
 16          | 16.x+
 15          | 15.x+ OR 9.x+ for legacy import
 14          | 8.x+
 13          | 7.x+
 12          | 6.x+
 11          | 5.x+
 10          | 4.x+
 9           | 2.x+
 8           | 2.x+
 7           | 2.x+

## Getting started

```
npm install --save  @angular-material-components/color-picker
```

## Setup

```
import { MAT_COLOR_FORMATS, NgxMatColorPickerModule, NGX_MAT_COLOR_FORMATS } from '@angular-material-components/color-picker';

@NgModule({
   ...
   imports: [
        ...
        NgxMatColorPickerModule
   ],
   providers: [
    { provide: MAT_COLOR_FORMATS, useValue: NGX_MAT_COLOR_FORMATS }
   ],
   ...
})
export class AppModule { }
```
@see [src/app/demo-colorpicker/demo-colorpicker.module.ts](src/app/demo-colorpicker/demo-colorpicker.module.ts)

## Using the component

### Color Picker (ngx-mat-color-picker)

```
<mat-form-field>
    <input matInput [ngxMatColorPicker]="picker" [formControl]="colorCtr" [disabled]="disabled">
    <ngx-mat-color-toggle matSuffix [for]="picker"></ngx-mat-color-toggle>
    <ngx-mat-color-picker #picker [touchUi]="touchUi" [color]="color"></ngx-mat-color-picker>
</mat-form-field>
```

#### List of @Input

| @Input        	| 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. 	|

## Theming
- @see @angular/material [Using a pre-built theme](https://material.angular.io/guide/theming#using-a-pre-built-theme)
- Add the Material Design icon font to your index.html
```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
```

## License
MIT

---
_Source: https://npm.io/package/@vipstorage/material-color-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._