New to Kendo UI for Angular? Start a free 30-day trial
ColorsComponent
A collection of one or more ArcGauge colors (more information and example).
ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-arcgauge [value]="value">
<kendo-arcgauge-colors>
<kendo-arcgauge-color *ngFor="let item of colors"
[from]="item.from" [to]="item.to" [color]="item.color">
</kendo-arcgauge-color>
</kendo-arcgauge-colors>
</kendo-arcgauge>
`
})
export class AppComponent {
public value: number = 10;
public colors: any[] = [{
to: 25,
color: '#0058e9'
}, {
from: 25,
to: 50,
color: '#37b400'
}, {
from: 50,
to: 75,
color: '#ffc000'
}, {
from: 75,
color: '#f31700'
}];
}
Selector
kendo-arcgauge-colors