Bootstrap

API progressbar

createProgressbar

function

createProgressbar(props?): ProgressbarWidget

Create a Progressbar with given config props

Parameters
props?

PropsConfig<ProgressbarProps>

Returns

ProgressbarWidget

a ProgressbarWidget


getProgressbarDefaultConfig

function

getProgressbarDefaultConfig(): ProgressbarProps

Retrieve a shallow copy of the default Progressbar config

Returns

ProgressbarProps

the default Progressbar config


ProgressbarBodyDirective

class

Directive that provides a template reference for the progress bar context. This directive provides a template reference for the ProgressbarContext.


ProgressbarComponent

class

ProgressbarComponent is a UI component that extends the BaseWidgetDirective to create a customizable progress bar widget. It provides various inputs to configure the appearance and behavior of the progress bar.

Properties
animated

readonly animated: InputSignalWithTransform<undefined | boolean, unknown>

If true, animates a striped progressbar. Takes effect only for browsers supporting CSS3 animations, and if striped is true.

Default Value

false


ariaLabel

readonly ariaLabel: InputSignal<undefined | string>

The aria label.

Default Value

'Progressbar'


ariaValueTextFn

readonly ariaValueTextFn: InputSignal<undefined | (value, minimum, maximum) => undefined | string>

Return the value for the 'aria-valuetext' attribute.

Param

current value

Param

minimum value

Param

maximum value

Default Value
() => undefined

children

readonly children: InputSignal<SlotContent<ProgressbarContext>>

Label of the progress.


className

readonly className: InputSignal<undefined | string>

CSS classes to be applied on the widget main container

Default Value

''


height

readonly height: InputSignal<undefined | string>

Height of the progressbar, can be any valid css height value.

Default Value

''


max

readonly max: InputSignalWithTransform<undefined | number, unknown>

The maximum value.

Default Value

100


min

readonly min: InputSignalWithTransform<undefined | number, unknown>

The minimum value.

Default Value

0


striped

readonly striped: InputSignalWithTransform<undefined | boolean, unknown>

If true, shows a striped progressbar.

Default Value

false


structure

readonly structure: InputSignal<SlotContent<ProgressbarContext>>

Global template for the Progressbar.


type

readonly type: InputSignal<undefined | BSContextualClass>

Type of the progressbar, following bootstrap types.


value

readonly value: InputSignalWithTransform<undefined | number, unknown>

The current value.

Default Value

0

Accessors
api
Get Signature

get api(): W["api"]

Retrieves the widget api

Returns

W["api"]

the widget api


directives
Get Signature

get directives(): W["directives"]

Retrieves the widget directives

Returns

W["directives"]

the widget directives


state
Get Signature

get state(): AngularState<W>

Retrieves the widget state. Each property of the state is exposed through an Angular Signal

Returns

AngularState<W>

the widget state


ProgressbarContext

interface

Represents the context for a Progressbar widget. This interface is used to define the context object that is passed to the Progressbar widget.

Properties
api

api: object

all the api functions to interact with the widget


directives

directives: ProgressbarDirectives

directives to be used on html elements in the template of the widget or in the slots


state

state: AngularState<ProgressbarWidget>

The state of the widget. Each property of the state is exposed through an Angular Signal


progressbarDefaultSlotStructure

constant

const progressbarDefaultSlotStructure: SlotContent<ProgressbarContext>

Represents the default slot structure for the progress bar component.


ProgressbarDirectives

interface

Interface representing directives for a progress bar component.

Properties
ariaDirective

ariaDirective: Directive

A directive to be applied to the main container that handles aria attributes.


ProgressbarProps

interface

Interface representing the properties for the Progressbar component.

Properties
animated

animated: boolean

If true, animates a striped progressbar. Takes effect only for browsers supporting CSS3 animations, and if striped is true.

Default Value

false


ariaLabel

ariaLabel: string

The aria label.

Default Value

'Progressbar'


ariaValueTextFn

ariaValueTextFn: (value, minimum, maximum) => undefined | string

Return the value for the 'aria-valuetext' attribute.

Parameters
value

number

current value

minimum

number

minimum value

maximum

number

maximum value

Returns

undefined | string

Default Value
() => undefined

children

children: SlotContent<ProgressbarContext>

Label of the progress.


className

className: string

CSS classes to be applied on the widget main container

Default Value

''


height

height: string

Height of the progressbar, can be any valid css height value.

Default Value

''


max

max: number

The maximum value.

Default Value

100


min

min: number

The minimum value.

Default Value

0


striped

striped: boolean

If true, shows a striped progressbar.

Default Value

false


structure

structure: SlotContent<ProgressbarContext>

Global template for the Progressbar.


type

type: undefined | BSContextualClass

Type of the progressbar, following bootstrap types.


value

value: number

The current value.

Default Value

0


ProgressbarState

interface

Represents the state of a Progressbar component.

Properties
animated

animated: boolean

If true, animates a striped progressbar. Takes effect only for browsers supporting CSS3 animations, and if striped is true.

Default Value

false


ariaLabel

ariaLabel: string

The aria label.

Default Value

'Progressbar'


ariaValueText

ariaValueText: undefined | string

The aria value text.


children

children: SlotContent<ProgressbarContext>

Label of the progress.


className

className: string

CSS classes to be applied on the widget main container

Default Value

''


finished

finished: boolean

true if the value has reached its maximum value.


height

height: string

Height of the progressbar, can be any valid css height value.

Default Value

''


max

max: number

The maximum value.

Default Value

100


min

min: number

The minimum value.

Default Value

0


percentage

percentage: number

Percentage of completion.


started

started: boolean

true if the value is above its minimum value.


striped

striped: boolean

If true, shows a striped progressbar.

Default Value

false


structure

structure: SlotContent<ProgressbarContext>

Global template for the Progressbar.


type

type: undefined | BSContextualClass

Type of the progressbar, following bootstrap types.


value

value: number

The current value.

Default Value

0


ProgressbarStructureDirective

class

Directive to define the structure of a progress bar.

This directive provides a template reference for the ProgressbarContext.


ProgressbarWidget

type alias

ProgressbarWidget: Widget<ProgressbarProps, ProgressbarState, object, ProgressbarDirectives>

Represents a Progressbar widget.

This type defines the structure of a Progressbar widget, including its properties, state, and directives.