npm package: @ng-zi/extensions-bottom-sheet
Description: Angular Material Extensions for bottom-sheet
Latest version: 0.0.1

## 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.

```typescript
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.

```html
<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.

```typescript
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

```html
<mtx-bottom-sheet [bottomsheetconfig]="bottomSheetConfig" (actionClicked)="handleAction($event)"></mtx-bottom-sheet>
```

#### Component

```typescript
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.