Import
import { ProgressTrackerModule } from '@backbase/ui-ang/progress-tracker'
Usage
Use the bb-progress-tracker component to display progress tracking for multiple asynchronous operations. The component displays a circular button with an animated icon that shows the progress container when clicked.
<!-- Basic progress tracker usage -->
<bb-progress-tracker
[eventList]="progressEvents"
(cancel)="onCancel($event)">
</bb-progress-tracker>
Elements
The Progress Tracker module provides three main components that work together:
- bb-progress-tracker: The main wrapper component that orchestrates the progress tracking
- bb-progress-tracker-container: The container component that displays the progress items and handles visibility
- bb-progress-item: Individual progress item component that displays detailed progress information
bb-progress-tracker
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
eventList |
IProgressTrackerConfig[] |
[] |
|
isOpen |
boolean |
false |
|
progressTrackerHeaderTemplate |
TemplateRef<any> |
undefined |
|
progressTrackerItemTemplate |
TemplateRef<IProgressTrackerItemTemplateConfig> |
undefined |
|
progressTrackerTemplate |
TemplateRef<IProgressTrackerTemplateConfig> |
undefined |
eventList
The eventList input accepts an array of progress tracker configurations that define the ongoing processes to track. Only events with status IN_PROGRESS will be displayed.
<!-- Progress tracker with file upload events -->
<bb-progress-tracker [eventList]="uploadEvents"></bb-progress-tracker>
isOpen
The isOpen input determines whether the progress tracker container is opened or closed on render. When set to true, the progress tracker will be opened by default.
<!-- Progress tracker opened by default -->
<bb-progress-tracker
[eventList]="progressEvents"
[isOpen]="true">
</bb-progress-tracker>
progressTrackerHeaderTemplate
The progressTrackerHeaderTemplate input allows you to completely override the way progress tracker item headers are displayed.
<!-- Progress tracker with custom header template -->
<bb-progress-tracker
[eventList]="progressEvents"
[progressTrackerHeaderTemplate]="customHeaderTemplate">
</bb-progress-tracker>
progressTrackerItemTemplate
The progressTrackerItemTemplate input allows you to completely override the way individual progress tracker items are displayed.
<!-- Progress tracker with custom item template -->
<bb-progress-tracker
[eventList]="progressEvents"
[progressTrackerItemTemplate]="customItemTemplate">
</bb-progress-tracker>
progressTrackerTemplate
The progressTrackerTemplate input allows you to completely override the way the progress tracker container is displayed by providing a custom template reference.
<!-- Progress tracker with custom container template -->
<bb-progress-tracker
[eventList]="progressEvents"
[progressTrackerTemplate]="customContainerTemplate">
</bb-progress-tracker>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
cancel |
EventEmitter<string> |
Fired when a user cancels an individual progress item. Emits the item ID that was cancelled |
bb-progress-tracker-container
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
eventList |
IProgressTrackerConfig[] |
[] |
|
progressTrackerHeaderTemplate |
TemplateRef<any> |
undefined |
|
progressTrackerItemTemplate |
TemplateRef<IProgressTrackerItemTemplateConfig> |
undefined |
|
progressTrackerTemplate |
TemplateRef<IProgressTrackerTemplateConfig> |
undefined |
|
show |
boolean |
false |
eventList
The eventList input accepts an array of progress tracker configurations. The container automatically filters to show only events with IN_PROGRESS status.
<!-- Progress tracker container with events -->
<bb-progress-tracker-container [eventList]="progressEvents"></bb-progress-tracker-container>
progressTrackerHeaderTemplate
The progressTrackerHeaderTemplate input allows you to completely override the way progress tracker item headers are displayed.
<!-- Progress tracker container with custom header template -->
<bb-progress-tracker-container
[eventList]="progressEvents"
[progressTrackerHeaderTemplate]="customHeaderTemplate">
</bb-progress-tracker-container>
progressTrackerItemTemplate
The progressTrackerItemTemplate input allows you to completely override the way individual progress tracker items are displayed.
<!-- Progress tracker container with custom item template -->
<bb-progress-tracker-container
[eventList]="progressEvents"
[progressTrackerItemTemplate]="customItemTemplate">
</bb-progress-tracker-container>
progressTrackerTemplate
The progressTrackerTemplate input allows you to completely override the way the progress tracker container is displayed.
<!-- Progress tracker container with custom template -->
<bb-progress-tracker-container
[eventList]="progressEvents"
[progressTrackerTemplate]="customTemplate">
</bb-progress-tracker-container>
show
The show input controls the visibility of the progress tracker container.
<!-- Progress tracker container visible by default -->
<bb-progress-tracker-container
[eventList]="progressEvents"
[show]="true">
</bb-progress-tracker-container>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
showChange |
EventEmitter<boolean> |
Fired when the visibility state of the container changes. Emits the new visibility state |
bb-progress-item
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
eventPayload |
IEventPayload |
undefined |
|
progressTrackerHeaderTemplate |
TemplateRef<any> |
undefined |
|
progressTrackerItemTemplate |
TemplateRef<IProgressTrackerItemTemplateConfig> |
undefined |
eventPayload
The eventPayload input contains the detailed information about the progress item including estimated time, current progress, file name, and other metadata.
<!-- Progress item with event payload -->
<bb-progress-item [eventPayload]="itemPayload"></bb-progress-item>
progressTrackerHeaderTemplate
The progressTrackerHeaderTemplate input allows you to completely override the way the progress item header is displayed.
<!-- Progress item with custom header template -->
<bb-progress-item
[eventPayload]="itemPayload"
[progressTrackerHeaderTemplate]="customHeaderTemplate">
</bb-progress-item>
progressTrackerItemTemplate
The progressTrackerItemTemplate input allows you to completely override the way the progress item is displayed.
<!-- Progress item with custom template -->
<bb-progress-item
[eventPayload]="itemPayload"
[progressTrackerItemTemplate]="customItemTemplate">
</bb-progress-item>
Data models
IProgressTrackerConfig
The main configuration interface for progress tracker items.
interface IProgressTrackerConfig {
payload: IEventPayload;
id: string;
eventStatus: EventStatus;
}
IEventPayload
Contains the detailed information about the progress item.
interface IEventPayload {
eta: Eta;
progressStartTime: number;
current: number;
size: number;
name: string;
actionType: EventType;
itemId: string;
}
EventStatus
Enumeration of possible event statuses.
enum EventStatus {
IN_PROGRESS,
COMPLETED,
CANCELLED,
TIME_OUT,
}
EventType
Enumeration of supported event types.
enum EventType {
FILE_UPLOAD,
}
Eta (Estimated Time of Arrival)
Interface for representing estimated time remaining.
interface Eta {
hours: number;
mins: number;
secs: number;
}
IProgressTrackerTemplateConfig
Template context interface for the progress tracker container template.
interface IProgressTrackerTemplateConfig {
currentEvents: IProgressTrackerConfig[];
show: boolean;
animate: boolean;
}
IProgressTrackerItemTemplateConfig
Template context interface for progress tracker item templates.
interface IProgressTrackerItemTemplateConfig {
name: string;
eta: Eta;
itemId: boolean;
size: string;
current: string;
cancelItem: (id: string) => void;
}
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
- ARIA labels: The progress spinner button includes appropriate ARIA labels for screen readers ("Show progress")
- Keyboard navigation: Full keyboard support for all interactive elements including the toggle button and cancel buttons
- Screen reader support: Progress information, estimated time, and file names are properly announced
- Focus management: Clear focus indicators and proper focus handling throughout the component
- Escape key support: The progress tracker container can be closed using the Escape key
- Click outside behavior: Clicking outside the progress tracker container automatically closes it
- Progress indication: Individual progress bars include proper progressbar role and aria attributes with current value, min, and max values
- Button states: Cancel buttons are properly labeled and accessible via keyboard navigation
The component automatically filters to show only in-progress items and provides comprehensive progress information including estimated time remaining, current progress, and cancellation options for each tracked process.