Interfaces

This page documents the TypeScript interfaces and type definitions used throughout the ng-magary library.

Import Statement

import { MenuItem, MagaryTreeNode, SpeedDialItem, BreadcrumbItem } from 'ng-magary';

MenuItem

Universal menu item interface used across menu components.

label

string

Display label for the menu item

icon

string

Icon name (Lucide icon)

command

(event?: unknown) => void

Callback function executed when item is clicked

url

string

External URL to navigate to

target

string

HTML target attribute for URL links (e.g., _blank)

routerLink

string | readonly unknown[] | UrlTree | null

Angular router link

queryParams

Record<string, unknown>

Query parameters for router navigation

route

string

Route path

items

MenuItem[]

Nested menu items (canonical property)

children

MenuItem[]

Nested menu items (backward-compatible alias). Prefer items for new code

expanded

boolean

Whether the item is expanded (for hierarchical menus)

disabled

boolean

Whether the item is disabled

visible

boolean

Whether the item is visible

separator

boolean

Whether this item is a separator

string

Unique identifier for the item

badge

string

Badge text to display

badgeSeverity

MenuBadgeSeverity

Badge severity: 'success' | 'info' | 'warning' | 'danger' | 'contrast'

iconSize

number

Size of the icon in pixels

styleClass

string

Custom CSS class

iconClass

string

Custom CSS class for the icon

metadata

unknown

Custom metadata for the item

Example

const menuItems: MenuItem[] = [
  {
    label: 'Home',
    icon: 'home',
    routerLink: '/'
  },
  {
    label: 'Products',
    icon: 'package',
    items: [
      { label: 'Electronics', routerLink: '/products/electronics' },
      { label: 'Clothing', routerLink: '/products/clothing' }
    ]
  },
  {
    label: 'Settings',
    icon: 'settings',
    command: () => console.log('Settings clicked'),
    badge: '3',
    badgeSeverity: 'warning'
  }
];

BreadcrumbItem

Interface for breadcrumb navigation items.

label

string

Display label for the breadcrumb

icon

string

Icon name

command

(event?) => void

Callback function when item is clicked

url

string

External URL

routerLink

RouterLinkTarget

Angular router link

queryParams

Record<string, unknown>

Router query parameters

disabled

boolean

Whether the breadcrumb is disabled

target

string

HTML target attribute

style

Record<string, string | number | null | undefined>

Inline styles

styleClass

string

Custom CSS class

fragment

string

URL fragment

preserveFragment

boolean

Whether to preserve the fragment

skipLocationChange

boolean

Whether to skip location change

replaceUrl

boolean

Whether to replace the URL

state

Record<string, unknown>

Navigation state

Example

const breadcrumbs: BreadcrumbItem[] = [
  { label: 'Home', icon: 'home', routerLink: '/' },
  { label: 'Products', routerLink: '/products' },
  { label: 'Electronics', routerLink: '/products/electronics' }
];

Button Interfaces

SpeedDialItem

Interface for speed dial action items.

icon

string

required

Icon name (Lucide icon)

Tooltip text displayed on hover

command

(event?: Event) => void

Callback function when item is clicked

string

Unique identifier

ariaLabel

string

ARIA label for accessibility

backgroundColor

string

Custom background color

disabled

boolean

Whether the item is disabled

Example

const speedDialItems: SpeedDialItem[] = [
  {
    icon: 'plus',
    tooltip: 'Add New',
    command: () => this.addNew(),
    backgroundColor: '#4CAF50'
  },
  {
    icon: 'edit',
    tooltip: 'Edit',
    command: () => this.edit()
  },
  {
    icon: 'trash',
    tooltip: 'Delete',
    command: () => this.delete(),
    disabled: !this.hasSelection()
  }
];

Tree Interfaces

MagaryTreeNode

Interface for tree node data structure.

label

string

Display label for the node

header

string

Header text (used in organization chart)

data

unknown

Custom data associated with the node

icon

string

Icon name

expandedIcon

string

Icon to show when node is expanded

collapsedIcon

string

Icon to show when node is collapsed

children

MagaryTreeNode[]

Child nodes

leaf

boolean

Whether the node is a leaf node (no children)

expanded

boolean

Whether the node is expanded

type

string

Node type identifier

parent

MagaryTreeNode

Reference to parent node

partialSelected

boolean

Whether the node is partially selected (some children selected)

styleClass

string

Custom CSS class

draggable

boolean

Whether the node can be dragged

droppable

boolean

Whether other nodes can be dropped on this node

selectable

boolean

Whether the node can be selected

key

string

Unique key for the node

Example

const treeData: MagaryTreeNode[] = [
  {
    label: 'Documents',
    icon: 'folder',
    expandedIcon: 'folder-open',
    collapsedIcon: 'folder',
    expanded: true,
    children: [
      {
        label: 'Work',
        icon: 'briefcase',
        children: [
          { label: 'Report.pdf', icon: 'file', leaf: true },
          { label: 'Presentation.pptx', icon: 'file', leaf: true }
        ]
      },
      {
        label: 'Personal',
        icon: 'user',
        children: [
          { label: 'Resume.pdf', icon: 'file', leaf: true }
        ]
      }
    ]
  }
];

MagaryTreeSelectionValue

Type for tree selection state.

type MagaryTreeSelectionValue = 
  | MagaryTreeNode 
  | MagaryTreeNode[] 
  | Record<string, boolean> 
  | null;

MagaryTreeNodeSelectionEvent

Event emitted when a tree node is selected or unselected.

originalEvent

Event

Original DOM event

node

MagaryTreeNode

The selected/unselected node

MagaryTreeNodeDropEvent

Event emitted when a node is dropped (drag and drop).

originalEvent

CdkDragDrop<MagaryTreeNode[]>

Original CDK drag-drop event

parent

MagaryTreeNode | null

The parent node where the drop occurred

dragNode

MagaryTreeNode

The node that was dragged

Table Interfaces

MagaryTableColumn

Interface for table column configuration.

field

string

required

Field name to display (supports nested fields with dot notation)

header

string

required

Column header text

type

'text' | 'avatar' | 'badge' | 'date' | 'currency'

Column data type for rendering

sortable

boolean

Whether the column is sortable

width

string

Column width (CSS value)

Example

const columns: MagaryTableColumn[] = [
  { field: 'id', header: 'ID', sortable: true, width: '100px' },
  { field: 'name', header: 'Name', sortable: true },
  { field: 'avatar', header: 'Avatar', type: 'avatar', width: '80px' },
  { field: 'status', header: 'Status', type: 'badge' },
  { field: 'createdAt', header: 'Created', type: 'date', sortable: true }
];

MagaryTableSortState

Interface for table sort state.

field

string | null

Field being sorted

order

-1 | 0 | 1

Sort order: -1 (descending), 0 (none), 1 (ascending)

Toast Interfaces

Toast

Interface for toast notification configuration.

string

Unique identifier (auto-generated if not provided)

type

'success' | 'info' | 'warning' | 'error'

Toast severity type

title

string

Toast title

message

string

Toast message content

icon

string

Custom icon name (overrides default type icon)

duration

number

Duration in milliseconds before auto-dismiss

life

number

Alias for duration

sticky

boolean

If true, toast will not auto-dismiss

data

unknown

Custom data payload

Example

this.toastService.add({
  type: 'success',
  title: 'Success!',
  message: 'Your changes have been saved.',
  duration: 3000
});

this.toastService.add({
  type: 'error',
  title: 'Error',
  message: 'Failed to save changes.',
  sticky: true
});

Paginator Interfaces

PaginatorState

Interface for paginator state and events.

first

number

Index of the first row

rows

number

Number of rows per page

page

number

Current page number (0-indexed)

pageCount

number

Total number of pages

Type Definitions

Theme

Supported theme names for MagaryThemeService.

type Theme = 'light' | 'dark' | 'purple' | 'green' | 'neo' | 'midnight' | 'cyberpunk' | 'cotton' | 'liquid';

MenuBadgeSeverity

Badge severity levels for menu items.

type MenuBadgeSeverity = 'success' | 'info' | 'warning' | 'danger' | 'contrast';

Core Exports

Interfaces

Interfaces

Interfaces

Import Statement

Menu Interfaces

MenuItem

Example

BreadcrumbItem

Example

Button Interfaces

SpeedDialItem

Example

Tree Interfaces

MagaryTreeNode

Example

MagaryTreeSelectionValue

MagaryTreeNodeSelectionEvent

MagaryTreeNodeDropEvent

Table Interfaces

MagaryTableColumn

Example

MagaryTableSortState

Toast Interfaces

Toast

Example

Paginator Interfaces

PaginatorState

Type Definitions

Theme

MenuBadgeSeverity

See Also

Build docs developers (and LLMs) love

Core Exports

Interfaces

​Interfaces

​Import Statement

​Menu Interfaces

​MenuItem

​Example

​BreadcrumbItem

​Example

​Button Interfaces

​SpeedDialItem

​Example

​Tree Interfaces

​MagaryTreeNode

​Example

​MagaryTreeSelectionValue

​MagaryTreeNodeSelectionEvent

​MagaryTreeNodeDropEvent

​Table Interfaces

​MagaryTableColumn

​Example

​MagaryTableSortState

​Toast Interfaces

​Toast

​Example

​Paginator Interfaces

​PaginatorState

​Type Definitions

​Theme

​MenuBadgeSeverity

​See Also

Build docs developers (and LLMs) love

Interfaces

Import Statement

Menu Interfaces

MenuItem

Example

BreadcrumbItem

Example

Button Interfaces

SpeedDialItem

Example

Tree Interfaces

MagaryTreeNode

Example

MagaryTreeSelectionValue

MagaryTreeNodeSelectionEvent

MagaryTreeNodeDropEvent

Table Interfaces

MagaryTableColumn

Example

MagaryTableSortState

Toast Interfaces

Toast

Example

Paginator Interfaces

PaginatorState

Type Definitions

Theme

MenuBadgeSeverity

See Also