MtxButton Component Overview

The MtxButton component is a versatile and highly customizable button component built using Angular Material 18. It extends the functionality of the MatButton component, providing additional configurations for appearance, size, shape, and loading state.

Features

| Feature | Description | |------------------------------|---------------------------------------------------------------------------------------| | Customizable Appearance | Supports multiple button appearances, including flat, raised, stroked, FAB, and mini-FAB. | | Loading State | Built-in support for displaying a loading spinner within the button. | | Configurable Properties | Allows configuration of button size, shape, color, and additional classes via a configuration object. | | Encapsulation and Change Detection | Utilizes ViewEncapsulation.None and ChangeDetectionStrategy.OnPush for efficient rendering and style encapsulation. |

Basic Usage

To use the MtxButton component, import the MtxButtonModule into your Angular module and include the <mtx-button> selector in your templates.

Example

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MtxButtonModule } from './path-to-your-mtx-button-module';

@NgModule({
  declarations: [
    // Your components
  ],
  imports: [
    BrowserModule,
    MtxButtonModule
  ],
  providers: [],
  bootstrap: [/* Your main component */]
})
export class AppModule { }

app.component.html

<mtx-button
  [buttonconfig]="{
    color: 'primary',
    appearance: 'raised',
    size: 'large',
    shape: 'rounded',
    loading: false
  }">
  Click Me
</mtx-button>

Configuration

The MtxButton component accepts a configuration object (MtxButtonConfig) to customize its appearance and behavior.

Configuration Properties

| Property | Type | Default | Description | |-------------|-----------|---------|------------------------------------------------------------| | color | string | basic | The color of the button. Can be any color supported by Angular Material. | | appearance| string | flat | The appearance of the button. Supported values are flat, raised, stroked, FAB, mini-FAB. | | size | string | medium| The size of the button. Can be any valid size class. | | shape | string | '' | The shape of the button. Can be any valid shape class. | | loading | boolean | false | A boolean indicating whether to show a loading spinner inside the button. | | disabled | boolean | false | A boolean indicating whether the button is disabled. | | classes | string | '' | Additional CSS classes to apply to the button. |

Default Configuration

The MtxButton component uses a default configuration (defaultMtxButtonConfig) which can be overridden by providing a custom configuration object.

Example Default Configuration:

export const defaultMtxButtonConfig: MtxButtonConfig = {
  color: 'basic',
  appearance: 'flat',
  size: 'medium',
  shape: '',
  loading: false,
  disabled: false,
  classes: ''
};

Loading State

The MtxButton component includes a loading state feature. When the loading property is set to true, a spinner is displayed inside the button, replacing its content.

Example Usage:

<mtx-button
  [buttonconfig]="{
    color: 'accent',
    appearance: 'raised',
    size: 'small',
    shape: 'rounded',
    loading: true
  }">
  Save
</mtx-button>

Summary

The MtxButton component is a powerful and flexible button component that extends the capabilities of Angular Material buttons. With its extensive configuration options and built-in loading state support, it can be used to create a wide variety of button styles and behaviors in your Angular applications.