Label

You can configure the visibility, formatting, and position of the label which indicates the status of the task progress in the ProgressBar.

Getting Started

To configure the label of the task progress, use the label option of the ProgressBar.

import { Component } from '@angular/core';
import { LabelSettings } from '@progress/kendo-angular-progressbar';

@Component({
    selector: 'my-app',
    template: `
         <div class="wrapper">
          <div class="wrapper">
            <input type="checkbox" class="k-checkbox" id="visible" [(ngModel)]="label.visible" />
            <label class="k-checkbox-label" [attr.for]="'visible'">Toggle the label visibility</label>
          </div>
            <span>Position: </span>
            <input type="radio" [(ngModel)]="label.position" value="start" name="position" id="position-start" class="k-radio">
            <label class="k-radio-label" [attr.for]="'position-start'">Start</label>
            <input type="radio" [(ngModel)]="label.position" value="center" name="position" id="position-center" class="k-radio">
            <label class="k-radio-label" [attr.for]="'position-center'">Center</label>
            <input type="radio" [(ngModel)]="label.position" value="end" name="position" id="position-end" class="k-radio">
            <label class="k-radio-label" [attr.for]="'position-end'">End</label>
        </div>
        <kendo-progressbar
            [value]="value"
            [label]="label"></kendo-progressbar>
    `,
    styles: [`
        .wrapper {
            padding-bottom: 20px;
        }
    `]
})
class AppComponent {
    public value = 50;

    public label: LabelSettings = {
        visible: true,
        format: 'percent',
        position: 'start'
    };
}

Using a Formatting Function

You can bind the format option of the LabelSettings to a callback which, based on the current value, returns a custom formatted string.

import { Component } from '@angular/core';
import { LabelSettings, LabelFn } from '@progress/kendo-angular-progressbar';

@Component({
    selector: 'my-app',
    template: `
        <kendo-progressbar
            [value]="value"
            [max]="max"
            [label]="label"></kendo-progressbar>
    `
})
class AppComponent {
    public value = 5;
    public max = 10;
    public formatter: LabelFn = (value: number): string => {
        return `${value}/${this.max}`;
    }
    public label: LabelSettings = {
        format: this.formatter,
        position: 'center'
    };
}

In this article