Getting Started with Kendo UI for Angular ColorGradient
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;
}
}