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

## MtxBadge Component Overview

The `MtxBadge` Component is a customizable badge component built using Angular Material. It enhances the standard Angular Material badge with additional features and flexibility.

### Installation

Importing the Module

Import `MtxBadgeModule` in your Angular module:

```typescript
import { NgModule } from '@angular/core';
import { MtxBadgeModule } from '@ng-zi/extensions/badge';

@NgModule({
  imports: [
    // other imports
    MtxBadgeModule
  ]
})
export class AppModule { }
```

### Using the Component

Use the `mtx-badge` component in your templates:

```html
<mtx-badge [config]="badgeConfig">
  <button>Notifications</button>
</mtx-badge>
```

### Configuration

The `config` input property allows customization of the badge:

```typescript
badgeConfig = {
  text: 'New',
  icon: 'notifications',
  tooltip: 'New notifications',
  color: 'accent',
  size: 'small',
  position: 'below before',
  hidden: false,
  customClasses: ['custom-class'],
  clickable: true,
  animation: 'slide'
};
```

### Properties

| Property       | Type                      | Default    | Description                                                      |
|----------------|---------------------------|------------|------------------------------------------------------------------|
| `text`         | `string`                  | `''`       | The text to display in the badge.                                |
| `icon`         | `string`                  | `''`       | The icon to display in the badge (uses Angular Material icons).  |
| `tooltip`      | `string`                  | `''`       | The tooltip text to display when hovering over the badge.        |
| `color`        | `ThemePalette`            | `primary`  | The color of the badge. Can be `primary`, `accent`, or `warn`.   |
| `size`         | `MatBadgeSize`            | `medium`   | The size of the badge. Can be `small`, `medium`, or `large`.     |
| `position`     | `MatBadgePosition`        | `above after` | The position of the badge. Can be `above` or `below`, combined with `before` or `after`. |
| `hidden`       | `boolean`                 | `false`    | Whether the badge is hidden.                                     |
| `customClasses`| `string[]`                | `[]`       | Custom CSS classes to apply to the badge.                        |
| `clickable`    | `boolean`                 | `false`    | Whether the badge is clickable.                                  |
| `animation`    | `'fade' | 'slide'`        | `fade`     | The animation type for visibility changes.                       |

### Events

| Event         | Description                                          |
|---------------|------------------------------------------------------|
| `badgeClick`  | Emitted when the badge is clicked (if `clickable` is true). |

### Examples

#### Basic Usage

```html
<mtx-badge [config]="{ text: 'New', color: 'accent' }">
  <button mtx-button>Messages</button>
</mtx-badge>
```

#### Advanced Usage

```html
<mtx-badge
  [config]="{
    text: '99+',
    icon: 'notifications',
    tooltip: '99+ notifications',
    color: 'warn',
    size: 'large',
    position: 'below after',
    hidden: false,
    customClasses: ['custom-badge'],
    clickable: true,
    animation: 'slide'
  }"
  (badgeClick)="handleBadgeClick()"
>
  <div>Inbox</div>
</mtx-badge>
```