syncfusion-angular-toolbar

What this skill does

# Implementing Syncfusion Angular Toolbar

Displays a group of command buttons arranged horizontally with responsive overflow handling and rich customization options.

## When to Use This Skill

Use this skill when you need to:
- Create action buttons in a horizontal toolbar layout
- Add separators between button groups
- Embed input components (NumericTextBox, DropDownList, CheckBox)
- Customize styling with CSS and Font Awesome icons
- Handle click events and command interactions
- Render custom templates and components in toolbar items
- Set tooltips for toolbar commands
- Add routing links as toolbar items
- Create toggle buttons with state management
- Implement responsive scrolling or popup overflow modes
- Build accessible toolbars with keyboard navigation

## Toolbar Overview

The Syncfusion Angular Toolbar is a container component that displays a collection of command buttons arranged horizontally. It supports multiple item types (buttons, separators, inputs), custom templates, styling, responsive behavior, and accessibility features.

**Key Features:**
- **Button Items:** Default item type with text, icons, and styling
- **Separators:** Vertical divisions between command groups
- **Input Components:** Embed NumericTextBox, DropDownList, CheckBox, RadioButton
- **Template Support:** Render Angular components and custom HTML
- **Responsive Modes:** Scrollable (default) and Popup overflow handling
- **Custom Styling:** CSS customization, Font Awesome integration, themes
- **Tooltips:** Hint text on mouse hover for all commands
- **Links:** Embed routing links and anchor elements
- **Toggle Buttons:** Stateful buttons with play/pause, show/hide functionality
- **Keyboard Navigation:** Tab key support, arrow key navigation
- **RTL Support:** Right-to-left text and layout direction
- **Accessibility:** WCAG compliance with ARIA attributes

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Install @syncfusion/ej2-angular-navigations package
- Setup Angular environment and dependencies
- Import ToolbarModule in component
- Add CSS imports for themes
- Create basic toolbar with button items
- Run and test the application

### Item Configuration
📄 **Read:** [references/item-configuration.md](references/item-configuration.md)
- Configure button item properties (text, id, prefixIcon, suffixIcon, width, align)
- Add separator items to group commands
- Setup Input type items (NumericTextBox, DropDownList, CheckBox, RadioButton)
- Enable tab key navigation with tabIndex property
- Dynamic item management and updates

### Styling & Customization
📄 **Read:** [references/styling-customization.md](references/styling-customization.md)
- Customize toolbar container styling with CSS
- Style toolbar items and buttons
- Customize icons and icon colors
- Apply hover and focus state styles
- Integrate Font Awesome third-party icons
- CSS class customization (e-toolbar, e-toolbar-item, e-tbar-btn)
- Icon positioning with e-icons class

### Command Events & Customization
📄 **Read:** [references/command-events.md](references/command-events.md)
- Implement click event handlers for toolbar items
- Use htmlAttributes property for custom HTML attributes
- Apply multiple CSS classes with cssClass property
- Command customization with id, class, style, role attributes
- Event-driven patterns for toolbar interactions
- Handle item-specific actions and responses

### Item Templates & Components
📄 **Read:** [references/item-templates.md](references/item-templates.md)
- Use template property for custom item rendering
- Render Angular components with ng-template directive
- Checkbox and input templates as string literals
- Template references with query selectors
- Menu component integration in toolbar
- Render multiple components (NumericTextBox, DatePicker, Button)
- Custom HTML template structures

### Tooltips & Links
📄 **Read:** [references/tooltips-links.md](references/tooltips-links.md)
- Set tooltipText property for hint text on hover
- Import and initialize Tooltip module with target selector
- Add anchor elements with ng-template
- Create routing links in toolbar items
- Toggle button implementation with state changes
- Play/pause, show/hide, and filter toggle patterns
- Accessibility for links and button states

### Responsive & Scrolling
📄 **Read:** [references/responsive-scrolling.md](references/responsive-scrolling.md)
- Scrollable overflow mode (default) with navigation arrows
- Touch swipe gestures for scrolling on devices
- Popup overflow mode for mobile-optimized display
- Customize scrollStep property for scroll distance
- Handle overflow when items exceed container width
- Navigation icon disabled states and behavior
- Continuous scrolling with long press navigation

### Advanced Features
📄 **Read:** [references/advanced-features.md](references/advanced-features.md)
- Grouping related toolbar buttons together
- Nested items and hierarchical structures
- Keyboard navigation with arrow keys and Tab support
- WCAG accessibility compliance and ARIA attributes
- RTL (right-to-left) language support
- Performance optimization for large toolbars
- Built-in compliance with WAI-ARIA specifications

### Complete API Reference
📄 **Read:** [references/api-reference.md](references/api-reference.md)
- **Toolbar Component Properties** (12 properties)
  - allowKeyboard, cssClass, enableCollision, enableHtmlSanitizer, enablePersistence
  - enableRtl, height, items, locale, overflowMode, scrollStep, width
- **Toolbar Events** (5 events)
  - beforeCreate (BeforeCreateArgs), clicked (ClickEventArgs), created, keyDown (KeyDownEventArgs), destroyed
- **Toolbar Methods** (7 methods)
  - addItems, destroy, disable, enableItems, hideItem, refreshOverflow, removeItems
- **Item Configuration Properties** (19+ properties)
  - align, cssClass, disabled, htmlAttributes, id, overflow, prefixIcon, suffixIcon
  - showAlwaysInPopup, showTextOn, tabIndex, template, text, tooltipText, type, visible, width
- **Types & Enums** (5 enums)
  - ItemType, ItemAlign, OverflowMode, OverflowOption, DisplayMode
- **Complete API Examples**
  - Advanced toolbar with all features
  - Responsive toolbar with dynamic configuration

## Quick Start Example

```typescript
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item text='Copy'></e-item>
        <e-item type='Separator'></e-item>
        <e-item text='Paste'></e-item>
        <e-item type='Separator'></e-item>
        <e-item text='Bold'></e-item>
        <e-item text='Italic'></e-item>
        <e-item text='Underline'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }
```

**Add CSS imports in styles.css:**

```css
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
```

## Common Patterns

### Pattern 1: Simple Text Buttons

```typescript
<e-item text='Cut'></e-item>
<e-item text='Copy'></e-item>
<e-item text='Paste'></e-item>
```

**Use when:** You need basic action buttons with text labels.

---

### Pattern 2: Icon Buttons with Text

```typescript
<e-item text='Bold' prefixIcon='e-icons e-bold'></e-item>
<e-item text='Italic' prefixIcon='e-icons e-italic'></e-item>
<e-item text='Undo' suffixIcon='e-icons e-undo'></e-item>
```

**Use when:** You want visual icons before or after text labels.

---

### Pattern 3: Grouped Commands with Separators

```typescript
<e-item text='Cut'></e-item>
<e-item text='Copy'></e-item>
<e-item type='Separator'></e-