Range in Angular Progress bar component
14 Nov 20222 minutes to read
Range represents the entire span of the ProgressBar and can be defined using the minimum
and maximum
properties.
import { Component, OnInit } from '@angular/core';
import { FontModel, AnimationModel } from '@syncfusion/ej2-progressbar';
@Component({
selector: 'my-app',
template: `
<ejs-progressbar id='percentage' type='Linear' trackThickness=24 progressThickness=24 value = 90 minimum=10 maximum=90 [labelStyle]='labelStyle' [showProgressValue]='showProgressValue' [animation]='animation'>
</ejs-progressbar>`
})
export class AppComponent implements OnInit {
public animation: AnimationModel;
public labelStyle: FontModel;
public showProgressValue: boolean;
ngOnInit(): void {
this.animation = { enable: true, duration: 2000, delay: 0 };
this.labelStyle = { color: '#FFFFFF' };
this.showProgressValue = true;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ProgressBarModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);