@anguless/angulux/colorpicker

colorpicker

1 declarations3 demos

import

import { ColorPickerModule } from '@anguless/angulux/colorpicker';

Basic

The picker opens in an overlay and binds to a hex string.

1976d2

<agl-colorPicker [(ngModel)]="colour" /><span>{{ colour }}</span>

Inline

An inline picker is always visible instead of opening in an overlay.

<agl-colorPicker [(ngModel)]="colour" [inline]="true" />

Format

Format switches the bound value between hex, rgb and hsb.

{ "r": 25, "g": 118, "b": 210 }

<agl-colorPicker [(ngModel)]="colour" format="rgb" /><span>{{ colour | json }}</span>

API

Generated from the committed corpus, which check:corpus holds to the built library.

ColorPicker

componentagl-colorPicker, agl-colorpicker, agl-color-picker

ColorPicker groups a collection of contents in tabs.

Input	Type	Default	Description
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the component.
showTransitionOptions deprecated — since v21.0.0, use `motionOptions` instead.	string	not documented	Transition options of the show animation.
hideTransitionOptions deprecated — since v21.0.0, use `motionOptions` instead.	string	not documented	Transition options of the hide animation.
inline	boolean \| undefined	not documented	Whether to display as an overlay or not.
format	'hex' \| 'rgb' \| 'hsb'	not documented	Format to use in value binding.
tabindex	string \| undefined	not documented	Index of the element in tabbing order.
inputId	string \| undefined	not documented	Identifier of the focus input to match a label defined for the dropdown.
autoZIndex	boolean	not documented	Whether to automatically manage layering.
autofocus	boolean \| undefined	not documented	When present, it specifies that the component should automatically get focus on load.
defaultColor	string \| undefined	not documented	Default color to display initially when model value is not present.
appendTo	HTMLElement \| ElementRef \| TemplateRef<any> \| 'self' \| 'body' \| null \| undefined \| any	'self'	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
overlayOptions	OverlayOptions \| undefined	not documented	Whether to use overlay API feature. The properties of overlay API can be used like an object in it.
motionOptions	MotionOptions \| undefined	not documented	The motion options.

Output	Type	Description
onChange	EventEmitter<ColorPickerChangeEvent>	Callback to invoke on value change.
onShow	EventEmitter<any>	Callback to invoke on panel is shown.
onHide	EventEmitter<any>	Callback to invoke on panel is hidden.

Inherited from BaseEditableHolder

inherited

Input	Type	Default	Description
required		false	There must be a value (if set). Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` is required when that control carries `Validators.required` or `Validators.requiredTrue`.
invalid		false	When present, it specifies that the component should have invalid state style. Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` shows the state of that control once it is touched or dirty.
touched	boolean \| undefined	undefined	Whether the user has visited the control. Once this or `dirty` is set, the invalid state style waits for interaction: it appears when the control is touched or dirty. Signal Forms' `[formField]` sets both, so an untouched required field is not shown as invalid. Leave both unset and `invalid` alone decides.
dirty	boolean \| undefined	undefined	Whether the user has changed the value. See `touched`.
disabled		false	When present, it specifies that the component should have disabled state style.
name	string \| undefined	undefined	When present, it specifies that the name of the input.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.