ColorGradient Overview

The ColorGradient renders a gradient, a hue and an alpha slider, and inputs to manually enter the desired color.

The component is independently used by the Kendo UI ColorPicker for Angular and can be directly added to the page instead of rendered in a popup.

Basic Usage

The following example demonstrates the ColorGradient in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="example">
            <div class="img" [ngStyle]="{ 'background-color': currentColor }"></div>
            <div class="wrapper">
                <kendo-colorgradient
                    [(value)]="currentColor"
                >
                </kendo-colorgradient>
            </div>
        </div>
    `,
    styles: [`
        .example {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .img {
            width: 490px;
            height: 290px;
            background-image: url('https://demos.telerik.com/kendo-ui/content/web/colorpicker/motor.png');
        }
        .wrapper {
            margin-top: 10px;
        }
    `]
})

class AppComponent {
    public currentColor: string = 'rgba(195, 0, 47, 1)';

 }

Functionality and Features

Events

The following example demonstrates the basic valueChange event of the ColorGradient.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <strong>Selected color: <span>{{ color }}</span></strong>
        </div>
        <kendo-colorgradient
            [value]="color"
            (valueChange)="onChange($event)"
        >
        </kendo-colorgradient>
    `
})
export class AppComponent {
    public color: string = 'rgba(116, 58, 174, 1)';

    public onChange(color: string): void {
        this.color = color;
    }
}

In this article