MtxExpansionPanel Component Overview

The MtxExpansionPanel Component is a flexible and customizable Angular component that encapsulates the behavior and appearance of an expansion panel, allowing users to expand and collapse content with ease.

Features

• Dynamic Content: Supports dynamic rendering of panel titles and content, including strings, templates (via TemplateRef), and custom Angular components.
• Toggle Icon: Optional toggle icon for expanding and collapsing the panel.
• Disabled State: Ability to disable the expansion panel.
• Customization: Configurable panel title, content, initial state, and toggle icon visibility.
• Integration: Seamlessly integrates with Angular Material's MatExpansionPanel for consistent styling and behavior.

Usage

Installation

1. Install Angular Material if not already installed:

   ng add @angular/material

2. Import MtxExpansionPanelModule into your Angular module:

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { MtxExpansionPanelModule } from './expansion-panel.module';
   
   @NgModule({
     imports: [
       BrowserModule,
       BrowserAnimationsModule,
       MtxExpansionPanelModule
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

Example

<mtx-expansion-panel [config]="{ panelTitle: 'Panel Title', panelContent: 'Panel Content' }"></mtx-expansion-panel>

Configuration Object (MtxExpansionPanelConfig)

• panelTitle: Title of the expansion panel.
• panelContent: Content of the expansion panel (supports string, TemplateRef, or custom Angular component).
• expanded (optional): Boolean to control the expanded state of the panel (default: false).
• hideToggleIcon (optional): Boolean to hide the toggle icon (default: false).
• disabled (optional): Boolean to disable the expansion panel (default: false).

Methods

• toggleExpansion(): Toggles the expansion state of the panel.

API

Inputs

• config: Configuration object of type MtxExpansionPanelConfig to customize the expansion panel.

Styling

Customize styles for the expansion panel using expansion-panel.scss.

Dependencies

• Angular Material: Provides base styles and behavior for expansion panels.
• Angular Core: Required for component and module setup.