MtxProgressBar Component Overview

The MtxProgressBar component is a customizable progress bar component that visualizes the progression of a task. It can be used to indicate loading status, completion percentage, or any other form of progress.

Usage

Installation

Before using the MtxProgressBar component, ensure you have Angular Material installed in your project:

ng add @angular/material

Next, import the MtxProgressBarModule into your application module:

import { MtxProgressBarModule } from 'your-library-path';

@NgModule({
  declarations: [AppComponent],
  imports: [
    // other imports
    MtxProgressBarModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Basic Example

<mtx-progress-bar value="50"></mtx-progress-bar>

Advanced Example

<mtx-progress-bar
  [config]="{
    value: 40,
    bufferValue: 60,
    mode: 'buffer',
    color: 'warn',
    appearance: 'standard',
    showLabel: true,
    labelPosition: 'inside',
    animationDuration: 500,
    customLabel: 'Loading...'
  }">
</mtx-progress-bar>

API

Inputs

| Name | Type | Description | |-------------------|--------------------------------|----------------------------------------------| | config | MtxProgressBarConfig | Configuration object for the progress bar. |

Config

The MtxProgressBarConfig interface defines the properties that can be configured for the progress bar.

| Property | Type | Default | Description | |-------------------|--------------------------------|---------------|----------------------------------------------| | value | number | 0 | The current value of the progress bar. | | bufferValue | number | 0 | The buffer value of the progress bar. | | mode | 'determinate' \| 'indeterminate' \| 'buffer' \| 'query' | 'determinate' | The mode of the progress bar. | | color | ThemePalette | 'primary' | The color of the progress bar. | | appearance | 'standard' \| 'inline' | 'standard' | The appearance of the progress bar. | | showLabel | boolean | false | Whether to display a label on the progress bar. | | labelPosition | 'inside' \| 'outside' | 'inside' | The position of the label relative to the progress bar. | | animationDuration | number | 300 | The duration of the progress bar animation in milliseconds. | | customLabel | string | '' | Custom label to display on the progress bar. |

Styling

You can customize the appearance of the progress bar component using standard CSS or SCSS.

Notes

• Ensure that you have the necessary Angular Material theme included in your project.
• The MtxProgressBar component is designed to be used with Angular Material 18 and may not be fully compatible with earlier versions.