Properties

NameTypeDefault
color String '#ff0000'

Sets or gets the color property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxColorPicker #myColorPicker
[width]="250" [height]="250" [color]="'#ffff00'">
</jqxColorPicker>
`
})
export class AppComponent {
}
colorMode enum:ColorPickerColorMode 'saturation'
enum ColorPickerColorMode {
     hue,
     saturation
}

Sets or gets the colorMode property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxColorPicker #myColorPicker
[width]="250" [height]="250" [colorMode]="'hue'">
</jqxColorPicker>
`
})
export class AppComponent {
}
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxColorPicker #myColorPicker
[width]="250" [height]="250" [disabled]="true">
</jqxColorPicker>
`
})
export class AppComponent {
}
height Size null

Sets or gets the height property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxColorPicker #myColorPicker
[width]="250" [height]="250">
</jqxColorPicker>
`
})
export class AppComponent {
}
showTransparent Boolean false

Sets or gets the showTransparent property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxColorPicker #myColorPicker
[width]="250" [height]="250" [showTransparent]="true">
</jqxColorPicker>
`
})
export class AppComponent {
}
width Size null

Sets or gets the width property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxColorPicker #myColorPicker
[width]="250" [height]="250">
</jqxColorPicker>
`
})
export class AppComponent {
}

Events

colorchange Event

This event is triggered when a new color is picked.

Code examples

Bind to the colorchange event of jqxColorPicker.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxColorPicker #myColorPicker (onColorchange)="Colorchange($event)"
[width]="250" [height]="250">
</jqxColorPicker>
`
})
export class AppComponent {
Colorchange(event: any): void
{
// Do Something
}

}

Methods

NameReturn TypeArguments
getColor Any None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxColorPicker #myColorPicker
[width]="250" [height]="250">
</jqxColorPicker>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myColorPicker') myColorPicker: jqxColorPickerComponent;
ngAfterViewInit(): void
{
let value = this.myColorPicker.getColor();
}

}

setColor Void color: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxColorPicker #myColorPicker
[width]="250" [height]="250">
</jqxColorPicker>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myColorPicker') myColorPicker: jqxColorPickerComponent;
ngAfterViewInit(): void
{
this.myColorPicker.setColor('#ffaaff');
}

}