MtxBottomSheet Component Overview

The MtxBottomSheet component is a customizable bottom sheet implementation using Angular Material. This component allows you to display a modal sheet at the bottom of the screen, providing a space for content and actions. The MtxBottomSheet can be configured with custom content and actions, making it a flexible solution for various use cases.

Features

• Custom Content: Display any HTML content within the bottom sheet.
• Custom Actions: Add buttons for user actions.
• Configurable: Easily configure the bottom sheet's content and actions through a configuration object.
• Standalone Component: The component is designed to be used independently with minimal setup.
• Change Detection: Optimized with ChangeDetectionStrategy.OnPush for better performance.

Basic Usage

To use the MtxBottomSheet component, you need to import MtxBottomSheetModule into your module and include the component in your template.

1. Import the Module

First, import the MtxBottomSheetModule in your application module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MtxBottomSheetModule } from './path-to-bottom-sheet-module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MtxBottomSheetModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Add the Component to Your Template

Next, include the MtxBottomSheet component in your template and provide the necessary configuration.

<mtx-bottom-sheet [bottomsheetconfig]="bottomSheetConfig" (actionClicked)="handleAction($event)"></mtx-bottom-sheet>

3. Define the Configuration

In your component, define the configuration object and handle the action click event.

import { Component } from '@angular/core';
import { MtxBottomSheetConfig } from './path-to-bottom-sheet-bottomsheetconfig';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  bottomSheetConfig: MtxBottomSheetConfig = {
    sheetContent: '<p>Example content</p>',
    customActions: ['Action 1', 'Action 2']
  };

  handleAction(action: string) {
    console.log('Action clicked:', action);
  }
}

Configuration

The MtxBottomSheetConfig object allows you to customize the content and actions of the bottom sheet. Here are the available options:

• sheetContent: A string containing HTML content to be displayed in the bottom sheet.
• customActions: An array of strings representing the labels of the action buttons.

Example

Here is a complete example of how to use the MtxBottomSheet component.

Template

<mtx-bottom-sheet [bottomsheetconfig]="bottomSheetConfig" (actionClicked)="handleAction($event)"></mtx-bottom-sheet>

Component

import { Component } from '@angular/core';
import { MtxBottomSheetConfig } from './path-to-bottom-sheet-bottomsheetconfig';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  bottomSheetConfig: MtxBottomSheetConfig = {
    sheetContent: '<p>Example content</p>',
    customActions: ['Action 1', 'Action 2']
  };

  handleAction(action: string) {
    console.log('Action clicked:', action);
  }
}

Conclusion

The MtxBottomSheet component provides a flexible and easy-to-use solution for displaying bottom sheets in your Angular applications. With configurable content and actions, it can be tailored to fit a wide range of use cases.