Progress bar

API for progress-bar

API reference for Angular Material progress-bar

import {MatProgressBarModule} from '@angular/material/progress-bar';

Selector: mat-progress-bar

Exported as: matProgressBar
Properties
Name Description
@Input()

bufferValue: number

Buffer value of the progress bar. Defaults to zero.

@Input()

color: ThemePalette

Theme color palette for the component.

@Input()

mode: ProgressBarMode

Mode of the progress bar.

Input must be one of these values: determinate, indeterminate, buffer, query, defaults to 'determinate'. Mirrored to mode attribute.

@Input()

value: number

Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow.

@Output()

animationEnd: EventEmitter<ProgressAnimationEnd>

Event emitted when animation of the primary progress bar completes. This event will not be emitted when animations are disabled, nor will it be emitted for modes with continuous animations (indeterminate and query).

defaultColor: ThemePalette | undefined

Default color to fall back to if no value is set.

Last animation end data.

Properties
Name Description

value: number

Default mat-progress-bar options that can be overridden.

Properties
Name Description

color: ThemePalette

Default color of the progress bar.

mode: ProgressBarMode

Default mode of the progress bar.

type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';

Injection token to be used to override the default options for mat-progress-bar.

const MAT_PROGRESS_BAR_DEFAULT_OPTIONS: InjectionToken<MatProgressBarDefaultOptions>;

API reference for Angular Material progress-bar-testing

import {MatProgressBarHarness} from '@angular/material/progress-bar/testing';

Harness for interacting with an MDC-based mat-progress-bar in tests.

Properties
Name Description

static hostSelector: '.mat-mdc-progress-bar'

Methods
async
getMode

Gets a promise for the progress bar's mode.

Returns
Promise<string | null>

async
getValue

Gets a promise for the progress bar's value.

Returns
Promise<number | null>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

static
with

Gets a HarnessPredicate that can be used to search for a progress bar with specific attributes.

Parameters

options

ProgressBarHarnessFilters = {}

Options for filtering which progress bar instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

A set of criteria that can be used to filter a list of MatProgressBarHarness instances.

Indigo & Pink theme selected.