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:

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:

<mtx-badge [config]="badgeConfig">
  <button>Notifications</button>
</mtx-badge>

Configuration

The config input property allows customization of the badge:

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

<mtx-badge [config]="{ text: 'New', color: 'accent' }">
  <button mtx-button>Messages</button>
</mtx-badge>

Advanced Usage

<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>