# @promact/ngx-material-colorpicker

> Color picker component (based on angular material 7+)

Latest version **0.0.3** (published 2019-03-29) · 0 weekly downloads

## Install

```sh
npm install @promact/ngx-material-colorpicker
pnpm add @promact/ngx-material-colorpicker
yarn add @promact/ngx-material-colorpicker
bun add @promact/ngx-material-colorpicker
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2019-03-29 |
| First published | 2019-03-29 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 698.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rushi.promact |

## Links

- npm: https://www.npmjs.com/package/@promact/ngx-material-colorpicker
- npm.io page: https://npm.io/package/@promact/ngx-material-colorpicker

## Dependencies (1)

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

## Recent versions

- 0.0.3 (latest) — 2019-03-29
- 0.0.2 — 2019-03-29
- 0.0.1 — 2019-03-29

## README

# ngx-material-colorpicker

Color picker component (based on angular material 7+)

## Usage

```
npm install --save @promact/ngx-material-colorpicker
```

### Import
```
import { ColorpickerModule } from 'ngx-material-colorpicker';

// In your App's module:
imports: [
   ColorpickerModule
]
```

### Add in your HTML

```
<ngx-material-colorpicker [(ngModel)]="color"></ngx-material-colorpicker>
```

## API

### Properties

| Name | Type | Description |
| --- | --- | --- |
| `disabled` | `boolean` | Whether or not the colorpicker is disabled |
| `format` | `string` | 	Color format:'hex', 'rgb', 'hsl'.Default :hex |
| `id` | `number` | The unique ID of this colorpicker. |
| `tabindex` | `number` | The tabIndex of the colorpicker. |

### Events

| Name | Type | Description |
| --- | --- | --- |
| `change` | `Event` | Fired when color is changed |

### Examples
A colorpicker would have the following markup.
```html
<ngx-material-colorpicker [(ngModel)]="color"></ngx-material-colorpicker>
```
```html
<ngx-material-colorpicker [(ngModel)]="color" format="hsla"></ngx-material-colorpicker>
```
```html
<ngx-material-colorpicker [(ngModel)]="color" [disabled]="true"></ngx-material-colorpicker>
```

## Developing

### Change code in projects/ngx-material-colorpicker/src folder

### Build library

```
npm run build:lib
```

### Run demo

```
ng serve
```

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