Getting started with Angular Progress bar component

11 Jul 20243 minutes to read

This section explains you the steps required to create a progressbar and demonstrate the basic usage of the progressbar control.

Dependencies

Below is the list of minimum dependencies required to use the progressbar component.

    |-- @syncfusion/ej2-angular-progressbar
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data: "*"
    |-- @syncfusion/ej2-svg-base

Installation and Configuration

• You can use Angular CLI to setup your angular applications.

  npm install -g @angular/cli

For more information, refer to Angular sample setup

## Create an Angular Application

Start a new Angular application using below Angular CLI command.

ng new my-app
cd my-app

Installing Syncfusion progressbar package

• Install progressbar packages using below command.

  npm install @syncfusion/ej2-angular-progressbar --save

The above package installs progressbar dependencies which are required to render the component in Angular environment

Add Progressbar component

Modify the template in app.component.ts file to render the ej2-ng-progressbar component

[src/app/app.component.ts].

import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
imports: [
         ProgressBarModule
    ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the Charts component
    template: `<ejs-progressbar id='percentage'></ejs-progressbar>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent  { }

Now use the app-container in the index.html instead of default one.

<app-container></app-container>

• Now run the application in the browser using the below command.

npm start

The below example shows a basic Progressbar.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'



import { Component } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';

@Component({
imports: [
         ProgressBarModule
    ],


standalone: true,
    selector: 'my-app',
    // specifies the template string for the Progressbar component
    template: `<ejs-progressbar id='percentage'  type='Linear' height='160' [value]='value' [animation]='animation'> </ejs-progressbar>`
})

export class AppComponent {
   public animation: AnimationModel = { enable: true, duration: 2000, delay: 0 };
   public value: number = 40;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));