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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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
    }

    
}

							

						

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();
    }

    
}
							

						

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');
    }

    
}