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({ transform: numberAttribute })

bufferValue: number

Buffer value of the progress bar. Defaults to zero.

@Input()

color: string

Theme color of the progress bar. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/progress-bar/styling.

For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants

@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({ transform: numberAttribute })

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).

Last animation end data.

Properties
Name Description

value: number

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

Properties
Name Description

color: ThemePalette

Default theme color of the progress bar. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/progress-bar/styling.

For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants

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 a 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.

Azure & Blue theme selected.