MtxToolbar Component

The MtxToolbar component is a customizable toolbar component for Angular applications, providing a flexible way to create navigation and actions within an application's interface.

Usage

Basic Example

<app-mtx-toolbar></app-mtx-toolbar>

Advanced Example

<app-mtx-toolbar [config]="toolbarConfig"></app-mtx-toolbar>

API Summary

Inputs

| Name | Type | Description | |-----------------|-------------------|---------------------------------------| | config | MtxToolbarConfig| Configuration object for toolbar |

Outputs

| Name | Type | Description | |---------------------------|---------------------|---------------------------------------| | menuItemClicked | EventEmitter<any> | Emitted when a menu item is clicked | | notificationsClicked | EventEmitter<void>| Emitted when notifications button is clicked | | settingsClicked | EventEmitter<void>| Emitted when settings button is clicked |

Configuration

The MtxToolbarConfig interface allows customization of the toolbar appearance and behavior. Below are the available configuration options:

| Property | Type | Default Value | Description | |------------------------|-----------------|---------------|------------------------------------------------| | title | string | 'App Toolbar'| Title displayed in the toolbar | | showSearchInput | boolean | true | Whether to display the search input field | | showSettingsButton | boolean | true | Whether to display the settings button | | showNotifications | boolean | true | Whether to display the notifications button | | userProfileMenuItems | any[] | [] | Array of items for the user profile menu |

Usage Notes

• Ensure to provide a MtxToolbarConfig object to customize the toolbar's behavior and appearance.
• Handle emitted events (menuItemClicked, notificationsClicked, settingsClicked) to perform actions in the parent component based on user interactions.