Overview of IntegralUI ProgressBar for Angular

Created: 04 Nov 2019

IntegralUI ProgressBar is a native Angular component that visualize the progression of an operation. The component is fully customizable and can have a horizontal or vertical orientation. In this article, you will find general information about the progress bar component, including its properties, events and methods that you can use.

This example shows three progress bars in red, green and blue colors. Using the input boxes, you can edit the current progress value. Animations are enabled, whenever the progress value changed the progress bar shows value changes with animation.

If a new value is smaller then the current one, the progress bar will also show the old value in dimmed color, accompanied with animation to the new value after small delay.

How to Use IntegralUI ProgressBar in Angular

To use the ProgressBar component you need to do the following:

• In app template place the progress bar component using the iui-progressbar tag name
• Set values for different properties available
• To connect to the component progress value use the ngModel or value property

• HTML

<div class="app-block" #application>
    <iui-progressbar [allowAnimation]="true" [controlStyle]="ctrlStyleRed" [(ngModel)]="ctrlValueRed"></iui-progressbar> <div class="prb-ovw-block"><span>Red: </span> <input type="number" [(ngModel)]="ctrlValueRed" min="0" max="100" /></div><br/>
    <iui-progressbar [allowAnimation]="true" [controlStyle]="ctrlStyleGreen" [(ngModel)]="ctrlValueGreen"></iui-progressbar> <div class="prb-ovw-block"><span>Green: </span> <input type="number" [(ngModel)]="ctrlValueGreen" min="0" max="100" /></div><br/>
    <iui-progressbar [allowAnimation]="true" [controlStyle]="ctrlStyleBlue" [(ngModel)]="ctrlValueBlue"></iui-progressbar> <div class="prb-ovw-block"><span>Blue: </span> <input type="number" [(ngModel)]="ctrlValueBlue" min="0" max="100" /></div>
</div>
                            

By default, the progress indictor is a solid color, but you can change it by providing a custom image as a background. This is done through CSS. For example, to show the progress in blocks, you can use an image that has a transparent vertical line at the end. This when applied as the background to the progress bar, will show the indicator in blocks.

You can also change orientation of the ProgressBar to: horizontal or vertical. In horizontal orientation, the progress value increases from left to right, while in vertical orientation it increases from bottom to up direction.

Progress Bar as Editor in Other Angular Components

ProgressBar component is also usable as part of other components, like an editor. Here is an example of a Grid with Progress Bar as Editor.

You can also use the progress bar component in Angular Forms.

List of Available Properties, Events and Methods in IntegralUI ProgressBar

Supported Properties

You can use the following properties to change the appearance and behavior of the ProgressBar component:

• allowAnimation - determines whether changes to the progress value are animated or not
• controlStyle - specifies an object that contains all style settings for the component
• data - specifies an object that holds data related to the component
• enabled - determines whether the component is enabled or disabled
• name - uniquely identifies the component
• orientation - Determines whether the progress bar appears horizontally or vertically
• size - specifies the component width and height
• state - specifies the component state: disabled, hovered, etc.
• value - holds the current progress value

Using the above properties, you can customize the ProgressBar component in a way best suited for your application.

Supported Events

Here is a list of available events:

• enabledChanged - occurs when component is enabled or disabled
• orientationChanged - occurs when orientation property changes
• valueChanged - occurs when progress value changes
• stateChanged - occurs when component state changed: disabled, normal, hovered, selected

The valueChanged event is fired, whenever a progress value changes, either through the value property or by using the ngModel directive. By handling these events, you can further enhance the appearance and behavior of the component in your code.

Supported Methods

The following public methods are available:

• updateLayout - updates the component layout

How to Customize the Progress Bar Appearance

Several built-in CSS classes control the appearance of the ProgressBar component. By default, in angular components you can't change the CSS styles outside of the component, they are closed. However, if you set the ViewEncapsulation attribute to None in your app component, you can alter these classes directly, or using the controlStyle property.

Note If you don't want to modify the ViewEncapsulation, you can still change the component appearance by providing your own CSS style sheet a include it as part of the angular.json file under style section.

In this example, we are using the first approach that is setting the ViewEncapsulation to None and providing an object to the controlStyle property in code. This property accepts an object has two sections: general and content, where you can set the names of all custom CSS classes applied to different component states.

• Angular
• HTML
• CSS

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'iui-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {

    public ctrlStyleRed: any = {
        general: { normal: 'prb-ovw' },
        content: { normal: 'prb-ovw-content prb-ovw-content-red' }
    }

    // . . .

}
                            

<iui-progressbar [allowAnimation]="true" [controlStyle]="ctrlStyleRed" [(ngModel)]="ctrlValueRed"></iui-progressbar>
                            

.prb-ovw
{
    background: #efefef;
    border: 0;
    border-radius: 15px;
    display: inline-block;
    margin: 10px 15px 10px 0;
    padding: 0;
    vertical-align: middle;
    width: 300px;
}
.prb-ovw-content
{
    border-radius: 15px;
    height: 12px;
}
.prb-ovw-content-red
{
    background: #c60d0d;
}
                            

In this example, only the normal state is overridden with custom CSS classes. Other component states (disabled, hovered, selected) will remain the same.

Conclusion

When you need to show the progress of a process or activity, you can use the IntegralUI ProgressBar component for Angular. You can modify its appearance and behavior using various properties and events. By providing custom CSS classes, you can make the component closely match with the look of your applications. This component is also compatible with Angular Forms and can be used as part of it.

The ProgressBar component is part of IntegralUI Web.