Syncfusion Angular Toolbar

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

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:

@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

<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

<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

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

Use when: You need to visually group related commands.

---

Pattern 4: Toolbar with Input Components

<e-item type='Input'>
  <ng-template #template>
    <ejs-numerictextbox value="10" width="150"></ejs-numerictextbox>
  </ng-template>
</e-item>
<e-item type='Input'>
  <ng-template #template>
    <ejs-dropdownlist [dataSource]='data' width="120"></ejs-dropdownlist>
  </ng-template>
</e-item>

Use when: You need input fields, dropdowns, or other controls within the toolbar.

---

Pattern 5: Custom Templates with Checkboxes

<e-item>
  <ng-template #template>
    <input type='checkbox' id='check1' checked=''>
    <label for='check1'>Enable Feature</label>
  </ng-template>
</e-item>

Use when: You need custom HTML elements like checkboxes or custom controls.

---

Pattern 6: Links in Toolbar

<e-item>
  <ng-template #template>
    <a href="url" target="_blank">Documentation</a>
  </ng-template>
</e-item>

Use when: You need to add clickable links as toolbar items.

---

Pattern 7: Tooltips with Hover Help

<ejs-tooltip target='#Toolbar [title]'>
  <ejs-toolbar id='Toolbar'>
    <e-items>
      <e-item text='Cut' tooltipText='Cut selected content'></e-item>
      <e-item text='Paste' tooltipText='Paste copied content'></e-item>
    </e-items>
  </ejs-toolbar>
</ejs-tooltip>

Use when: You want to show hint text on mouse hover.

---

Pattern 8: Responsive Scrollable Toolbar

<ejs-toolbar width="300px">
  <e-items>
    <e-item text='Cut'></e-item>
    <e-item text='Copy'></e-item>
    <!-- Multiple items trigger horizontal scroll -->
  </e-items>
</ejs-toolbar>

Use when: Container is narrower than total content width, triggering scrollable mode.

---

Pattern 9: Toggle Buttons with State

<ng-template #template>
  <button ejs-button class="e-btn" iconCss="e-play-icon" 
    isToggle="true" (click)="onPlayClick()"></button>
</ng-template>

Use when: You need buttons that toggle states (play/pause, show/hide).

---

Pattern 10: Font Awesome Icons

<link rel="stylesheet" href="url" />

<e-item prefixIcon="fa fa-twitter"></e-item>
<e-item prefixIcon="fa fa-facebook"></e-item>

Use when: You need third-party icons like Font Awesome.

---

Key Properties

Common Use Cases

1. Text Editor Toolbar - Bold, Italic, Underline buttons with separators 2. File Operations - Cut, Copy, Paste, Undo, Redo buttons 3. Search Bar in Toolbar - Input field for search within container width 4. Formatting Options - Font size, color picker, alignment buttons 5. Navigation Toolbar - Links to different sections or pages 6. Mobile App Header - Icons with tooltips in compact, scrollable layout 7. Document Viewer - Zoom in/out, print, download toggles 8. Rich Text Editor - Full formatting toolbar with templates and inputs 9. Dashboard Controls - Date picker, filters, sorting options 10. Social Media Sharing - Font Awesome social icons in toolbar

Advanced Features

Table of Contents

• Button Grouping
• Accessibility Features
• Keyboard Navigation
• RTL Support
• Performance Optimization
• WAI-ARIA Compliance

Button Grouping

Group related toolbar buttons together using separators for visual organization and improved UX.

Basic Button Groups

<ejs-toolbar>
  <e-items>
    <!-- File operations group -->
    <e-item text='New' prefixIcon='e-icons e-new'></e-item>
    <e-item text='Open' prefixIcon='e-icons e-open'></e-item>
    <e-item text='Save' prefixIcon='e-icons e-save'></e-item>
    <e-item type='Separator'></e-item>

    <!-- Edit operations group -->
    <e-item text='Cut' prefixIcon='e-icons e-cut'></e-item>
    <e-item text='Copy' prefixIcon='e-icons e-copy'></e-item>
    <e-item text='Paste' prefixIcon='e-icons e-paste'></e-item>
    <e-item type='Separator'></e-item>

    <!-- Undo/Redo group -->
    <e-item text='Undo' prefixIcon='e-icons e-undo'></e-item>
    <e-item text='Redo' prefixIcon='e-icons e-redo'></e-item>
    <e-item type='Separator'></e-item>

    <!-- Formatting group -->
    <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='Underline' prefixIcon='e-icons e-underline'></e-item>
  </e-items>
</ejs-toolbar>

Group Styling

/* Visual styling for groups */
.e-toolbar .e-toolbar-item:not(.e-separator) {
  margin-right: 2px;
}

.e-toolbar .e-toolbar-item.e-separator {
  height: 24px;
  margin: 0 4px;
  background: #ddd;
  width: 1px;
  min-width: 1px;
  min-height: auto;
}

Accessibility Features

The Syncfusion Toolbar provides built-in accessibility compliance with WAI-ARIA specifications.

Accessibility Highlights

• Keyboard navigation support (Tab, Arrows, Enter)
• ARIA attributes for screen readers
• Focus indicators for visual navigation
• Semantic HTML for assistive technologies
• Color-independent visual indicators

Keyboard Navigation

Navigate toolbar items without mouse using keyboard shortcuts.

Default Navigation Keys

Keyboard Navigation Example

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <!-- Items with tabIndex for tab key navigation -->
        <e-item text='Cut' tabIndex="1" (keydown)="onKeyDown($event)"></e-item>
        <e-item text='Copy' tabIndex="2" (keydown)="onKeyDown($event)"></e-item>
        <e-item text='Paste' tabIndex="3" (keydown)="onKeyDown($event)"></e-item>
        <e-item type='Separator'></e-item>
        <e-item text='Undo' tabIndex="4" (keydown)="onKeyDown($event)"></e-item>
        <e-item text='Redo' tabIndex="5" (keydown)="onKeyDown($event)"></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  onKeyDown(event: KeyboardEvent) {
    const target = event.target as HTMLElement;
    
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      // Handle activation
      console.log('Item activated:', target.textContent);
    }
  }
}

Tab Key Navigation with tabIndex

<e-item text='Item 1' tabIndex="1"></e-item>
<e-item text='Item 2' tabIndex="2"></e-item>
<e-item text='Item 3' tabIndex="3"></e-item>

Users can press Tab repeatedly to cycle through items in tabIndex order.

RTL Support

Right-to-left language support for Arabic, Hebrew, and other RTL languages.

Enable RTL

<ejs-toolbar enableRtl="true">
  <e-items>
    <e-item text='قص' prefixIcon='e-icons e-cut'></e-item>
    <e-item text='نسخ' prefixIcon='e-icons e-copy'></e-item>
    <e-item text='لصق' prefixIcon='e-icons e-paste'></e-item>
  </e-items>
</ejs-toolbar>

RTL Component Example

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar [enableRtl]="isRtlMode">
      <e-items>
        <e-item text='تحرير' prefixIcon='e-icons e-edit'></e-item>
        <e-item text='حذف' prefixIcon='e-icons e-delete'></e-item>
        <e-item text='حفظ' prefixIcon='e-icons e-save'></e-item>
      </e-items>
    </ejs-toolbar>

    <button (click)="toggleRtl()">Toggle RTL</button>
  `
})
export class AppComponent {
  isRtlMode: boolean = false;

  toggleRtl() {
    this.isRtlMode = !this.isRtlMode;
  }
}

RTL CSS Adjustments

/* RTL-specific toolbar direction */
.e-rtl .e-toolbar {
  direction: rtl;
}

.e-rtl .e-toolbar .e-toolbar-item {
  direction: rtl;
}

/* Icon positioning in RTL mode */
.e-rtl .e-toolbar .e-tbar-btn .e-icons.e-btn-icon {
  margin-left: 6px;
  margin-right: 0;
}

Performance Optimization

Optimize toolbar performance for applications with many items or frequent updates.

Lazy Loading Items

export class AppComponent {
  toolbarItems: any[] = [];

  ngOnInit() {
    // Load initial items
    this.loadInitialItems();
  }

  loadInitialItems() {
    this.toolbarItems = [
      { text: 'Cut', prefixIcon: 'e-icons e-cut' },
      { text: 'Copy', prefixIcon: 'e-icons e-copy' },
      { text: 'Paste', prefixIcon: 'e-icons e-paste' }
    ];
  }

  addMoreItems() {
    // Load additional items on demand
    const moreItems = [
      { text: 'Undo', prefixIcon: 'e-icons e-undo' },
      { text: 'Redo', prefixIcon: 'e-icons e-redo' }
    ];
    this.toolbarItems = [...this.toolbarItems, ...moreItems];
  }
}

Dynamic Item Updates

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar #toolbar>
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item text='Copy'></e-item>
        <e-item text='Paste'></e-item>
      </e-items>
    </ejs-toolbar>

    <button (click)="addItem()">Add Item</button>
  `
})
export class AppComponent {
  @ViewChild('toolbar') toolbar?: ToolbarComponent;

  addItem() {
    if (this.toolbar?.toolbarItems) {
      this.toolbar.toolbarItems = [
        ...this.toolbar.toolbarItems,
        { text: 'New Item' }
      ];
    }
  }
}

Virtual Scrolling (for very long toolbars)

Use virtualization for toolbars with hundreds of items:

export class AppComponent {
  toolbarItems: any[] = [];

  ngOnInit() {
    // Generate large dataset
    this.toolbarItems = Array.from({ length: 1000 }, (_, i) => ({
      text: `Item ${i + 1}`,
      id: `item-${i}`
    }));
  }
}

WAI-ARIA Compliance

The toolbar implements WAI-ARIA attributes for accessibility.

ARIA Attributes

<ejs-toolbar role="toolbar" aria-label="Text formatting toolbar">
  <e-items>
    <e-item text='Bold'
            role='button'
            aria-label='Bold (Ctrl+B)'
            aria-pressed='false'>
    </e-item>
    <e-item text='Italic'
            role='button'
            aria-label='Italic (Ctrl+I)'
            aria-pressed='false'>
    </e-item>
    <e-item text='Underline'
            role='button'
            aria-label='Underline (Ctrl+U)'
            aria-pressed='false'>
    </e-item>
  </e-items>
</ejs-toolbar>

ARIA Live Regions

<div aria-live="polite" aria-atomic="true" id="toolbar-status">
  {{ statusMessage }}
</div>

<ejs-toolbar>
  <e-items>
    <e-item text='Save'
            (click)="onSave()"
            aria-label='Save document'>
    </e-item>
  </e-items>
</ejs-toolbar>

Component:

export class AppComponent {
  statusMessage: string = '';

  onSave() {
    // Perform save operation
    this.statusMessage = 'Document saved successfully';
  }
}

Complete Accessible Toolbar Example

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <!-- Accessible toolbar container -->
    <ejs-toolbar role="toolbar" 
                  aria-label="Document formatting toolbar"
                  [items]="items">
      <e-items>
        <!-- Formatting tools with accessible labels -->
        <e-item text='Bold'
                id='btn-bold'
                role='button'
                aria-label='Bold text (Keyboard: Ctrl+B)'
                aria-pressed='false'
                tabIndex="0"
                (click)="toggleBold()"
                (keydown)="handleKeyPress($event, 'bold')">
        </e-item>

        <e-item text='Italic'
                id='btn-italic'
                role='button'
                aria-label='Italic text (Keyboard: Ctrl+I)'
                aria-pressed='false'
                tabIndex="0"
                (click)="toggleItalic()"
                (keydown)="handleKeyPress($event, 'italic')">
        </e-item>

        <e-item text='Underline'
                id='btn-underline'
                role='button'
                aria-label='Underline text (Keyboard: Ctrl+U)'
                aria-pressed='false'
                tabIndex="0"
                (click)="toggleUnderline()"
                (keydown)="handleKeyPress($event, 'underline')">
        </e-item>

        <e-item type='Separator'></e-item>

        <!-- File operations -->
        <e-item text='Save'
                id='btn-save'
                role='button'
                aria-label='Save document (Keyboard: Ctrl+S)'
                tabIndex="0"
                (click)="onSave()"
                (keydown)="handleKeyPress($event, 'save')">
        </e-item>
      </e-items>
    </ejs-toolbar>

    <!-- Status message for screen readers -->
    <div class="sr-only" 
         role="status" 
         aria-live="polite" 
         aria-atomic="true">
      {{ accessibilityMessage }}
    </div>
  `
})
export class AppComponent {
  isBold: boolean = false;
  isItalic: boolean = false;
  isUnderline: boolean = false;
  accessibilityMessage: string = '';
  items: any[] = [];

  toggleBold() {
    this.isBold = !this.isBold;
    this.accessibilityMessage = `Bold ${this.isBold ? 'enabled' : 'disabled'}`;
  }

  toggleItalic() {
    this.isItalic = !this.isItalic;
    this.accessibilityMessage = `Italic ${this.isItalic ? 'enabled' : 'disabled'}`;
  }

  toggleUnderline() {
    this.isUnderline = !this.isUnderline;
    this.accessibilityMessage = `Underline ${this.isUnderline ? 'enabled' : 'disabled'}`;
  }

  onSave() {
    this.accessibilityMessage = 'Document saved';
  }

  handleKeyPress(event: KeyboardEvent, action: string) {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      switch(action) {
        case 'bold':
          this.toggleBold();
          break;
        case 'italic':
          this.toggleItalic();
          break;
        case 'underline':
          this.toggleUnderline();
          break;
        case 'save':
          this.onSave();
          break;
      }
    }
  }
}

Accessibility CSS

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus indicators */
.e-toolbar .e-tbar-btn:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  .e-toolbar .e-tbar-btn {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .e-toolbar * {
    animation: none !important;
    transition: none !important;
  }
}

Complete API Reference

Table of Contents

• Toolbar Component Properties
• Toolbar Events (5 events)
• Toolbar Methods (7 methods)
• Item Configuration Properties
• Types & Enums
• Complete API Examples

---

Toolbar Component Properties

allowKeyboard

Enables or disables keyboard interaction in the toolbar. When set to true, allows navigation using keyboard keys.

Type: boolean Default: true

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar [allowKeyboard]="isKeyboardEnabled">
      <e-items>
        <e-item text='Cut' id='cut'></e-item>
        <e-item text='Copy' id='copy'></e-item>
        <e-item text='Paste' id='paste'></e-item>
      </e-items>
    </ejs-toolbar>
    
    <button (click)="toggleKeyboard()">
      {{ isKeyboardEnabled ? 'Disable' : 'Enable' }} Keyboard
    </button>
  `
})
export class AppComponent {
  isKeyboardEnabled: boolean = true;

  toggleKeyboard() {
    this.isKeyboardEnabled = !this.isKeyboardEnabled;
  }
}

Keyboard Shortcuts:

• Tab/Shift+Tab: Navigate to next/previous item
• Arrow Keys: Move focus left/right within items
• Enter/Space: Activate focused button item
• Home: Move to first item
• End: Move to last item

---

cssClass

Sets custom CSS classes to the root element of the toolbar for styling customization.

Type: string Default: ''

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar cssClass="custom-toolbar dark-theme">
      <e-items>
        <e-item text='Home'></e-item>
        <e-item text='About'></e-item>
        <e-item text='Services'></e-item>
      </e-items>
    </ejs-toolbar>
  `,
  styles: [`
    :host ::ng-deep .custom-toolbar.dark-theme {
      background: #2c3e50;
      color: #ecf0f1;
    }
    
    :host ::ng-deep .custom-toolbar.dark-theme .e-toolbar-item .e-tbar-btn {
      color: #ecf0f1;
      border-color: #34495e;
    }
    
    :host ::ng-deep .custom-toolbar.dark-theme .e-toolbar-item .e-tbar-btn:hover {
      background: #34495e;
    }
  `]
})
export class AppComponent { }

---

enableCollision

Controls popup collision detection. When enabled, adjusts popup positioning to avoid viewport overflow in Popup mode.

Type: boolean Default: true

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar 
      overflowMode="Popup" 
      [enableCollision]="collisionEnabled"
      width="300px">
      <e-items>
        <e-item text='Cut' overflow='Show'></e-item>
        <e-item text='Copy' overflow='Show'></e-item>
        <e-item text='Paste' overflow='Show'></e-item>
        <e-item type='Separator'></e-item>
        <e-item text='Bold' overflow='Hide'></e-item>
        <e-item text='Italic' overflow='Hide'></e-item>
        <e-item text='Underline' overflow='Hide'></e-item>
      </e-items>
    </ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <label>
        <input type="checkbox" [checked]="collisionEnabled" 
               (change)="collisionEnabled = !collisionEnabled">
        Enable Collision Detection
      </label>
    </div>
  `
})
export class AppComponent {
  collisionEnabled: boolean = true;
}

---

enableHtmlSanitizer

Controls HTML content sanitization. When enabled, prevents cross-site scripting (XSS) attacks by sanitizing HTML content.

Type: boolean Default: true

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar [enableHtmlSanitizer]="sanitizeEnabled">
      <e-items>
        <!-- Safe HTML content -->
        <e-item template="<strong>Bold Text</strong>"></e-item>
        <!-- Template with script (will be sanitized if enabled) -->
        <e-item template="<span id='safe'>Safe Content</span>"></e-item>
      </e-items>
    </ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <p>Sanitization: {{ sanitizeEnabled ? 'ENABLED' : 'DISABLED' }}</p>
      <button (click)="toggleSanitization()">
        {{ sanitizeEnabled ? 'Disable' : 'Enable' }} Sanitization
      </button>
    </div>
  `
})
export class AppComponent {
  sanitizeEnabled: boolean = true;

  toggleSanitization() {
    this.sanitizeEnabled = !this.sanitizeEnabled;
  }
}

---

enablePersistence

Persists the toolbar state (item visibility, overflow state) between page reloads using browser localStorage.

Type: boolean Default: false

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar 
      id="persistToolbar"
      [enablePersistence]="true"
      overflowMode="Popup"
      width="300px">
      <e-items>
        <e-item text='Cut' overflow='Show' [visible]="true"></e-item>
        <e-item text='Copy' overflow='Show' [visible]="true"></e-item>
        <e-item text='Paste' overflow='Show' [visible]="true"></e-item>
        <e-item type='Separator' [visible]="true"></e-item>
        <e-item text='Bold' overflow='Hide' [visible]="true"></e-item>
        <e-item text='Italic' overflow='Hide' [visible]="true"></e-item>
      </e-items>
    </ejs-toolbar>
    
    <p>Toolbar state persisted. Refresh the page to verify state is maintained.</p>
  `
})
export class AppComponent { }

---

enableRtl

Enables Right-to-Left (RTL) direction for the toolbar. Essential for Arabic, Hebrew, and other RTL languages.

Type: boolean Default: false

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <div [dir]="rtlEnabled ? 'rtl' : 'ltr'">
      <ejs-toolbar [enableRtl]="rtlEnabled">
        <e-items>
          <e-item text='صفحة' prefixIcon='e-icons e-home'></e-item>
          <e-item text='حول' prefixIcon='e-icons e-info'></e-item>
          <e-item text='خدمات' prefixIcon='e-icons e-settings'></e-item>
          <e-item text='اتصل' prefixIcon='e-icons e-phone' align='Right'></e-item>
        </e-items>
      </ejs-toolbar>
      
      <div style="margin-top: 20px;">
        <button (click)="rtlEnabled = !rtlEnabled">
          {{ rtlEnabled ? 'Switch to LTR' : 'Switch to RTL' }}
        </button>
      </div>
    </div>
  `,
  styles: [`
    :host ::ng-deep .e-rtl {
      direction: rtl;
    }
  `]
})
export class AppComponent {
  rtlEnabled: boolean = false;
}

---

height

Specifies the height of the toolbar in pixels, percentages, or as a number (treated as pixels).

Type: string | number Default: auto

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <div>
      <h3>Height: {{ selectedHeight }}</h3>
      
      <ejs-toolbar [height]="selectedHeight">
        <e-items>
          <e-item text='Cut' prefixIcon='e-icons e-cut'></e-item>
          <e-item text='Copy' prefixIcon='e-icons e-copy'></e-item>
          <e-item text='Paste' prefixIcon='e-icons e-paste'></e-item>
        </e-items>
      </ejs-toolbar>
      
      <div style="margin-top: 20px;">
        <button (click)="selectedHeight = '40px'">Standard (40px)</button>
        <button (click)="selectedHeight = '60px'">Large (60px)</button>
        <button (click)="selectedHeight = '30px'">Compact (30px)</button>
        <button (click)="selectedHeight = '100%'">Full Height (100%)</button>
      </div>
    </div>
  `
})
export class AppComponent {
  selectedHeight: string | number = '40px';
}

---

items

Array of item configuration objects that define toolbar items, their properties, and behavior.

Type: ItemModel[] Default: []

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar [items]="toolbarItems"></ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <button (click)="addItem()">Add Item</button>
      <button (click)="removeLastItem()">Remove Last Item</button>
    </div>
  `
})
export class AppComponent {
  toolbarItems: ItemModel[] = [
    { text: 'Cut', prefixIcon: 'e-icons e-cut', tooltipText: 'Cut (Ctrl+X)' },
    { text: 'Copy', prefixIcon: 'e-icons e-copy', tooltipText: 'Copy (Ctrl+C)' },
    { text: 'Paste', prefixIcon: 'e-icons e-paste', tooltipText: 'Paste (Ctrl+V)' },
    { type: 'Separator' },
    { text: 'Undo', prefixIcon: 'e-icons e-undo', tooltipText: 'Undo' },
    { text: 'Redo', prefixIcon: 'e-icons e-redo', tooltipText: 'Redo' }
  ];

  addItem() {
    this.toolbarItems.push({
      text: `Item ${this.toolbarItems.length}`,
      prefixIcon: 'e-icons e-more'
    });
  }

  removeLastItem() {
    if (this.toolbarItems.length > 0) {
      this.toolbarItems.pop();
    }
  }
}

---

locale

Sets the locale for the toolbar component. Affects text display and RTL direction.

Type: string Default: 'en-US'

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar [locale]="currentLocale">
      <e-items>
        <e-item text='Home' prefixIcon='e-icons e-home'></e-item>
        <e-item text='Search' prefixIcon='e-icons e-search'></e-item>
        <e-item text='Settings' prefixIcon='e-icons e-settings' align='Right'></e-item>
      </e-items>
    </ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <button (click)="currentLocale = 'en-US'">English (US)</button>
      <button (click)="currentLocale = 'de'">German</button>
      <button (click)="currentLocale = 'fr'">French</button>
      <button (click)="currentLocale = 'ar'">Arabic (RTL)</button>
    </div>
  `
})
export class AppComponent {
  currentLocale: string = 'en-US';
}

---

overflowMode

Specifies how toolbar items are displayed when content exceeds container width.

Type: OverflowMode ('Scrollable' | 'Popup' | 'MultiRow' | 'Extended') Default: 'Scrollable'

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <div>
      <h3>Overflow Mode: {{ currentMode }}</h3>
      
      <ejs-toolbar 
        [overflowMode]="currentMode"
        width="350px">
        <e-items>
          <e-item text='Cut' prefixIcon='e-icons e-cut' overflow='Show'></e-item>
          <e-item text='Copy' prefixIcon='e-icons e-copy' overflow='Show'></e-item>
          <e-item text='Paste' prefixIcon='e-icons e-paste' overflow='Show'></e-item>
          <e-item type='Separator'></e-item>
          <e-item text='Bold' prefixIcon='e-icons e-bold' overflow='Hide'></e-item>
          <e-item text='Italic' prefixIcon='e-icons e-italic' overflow='Hide'></e-item>
          <e-item text='Underline' prefixIcon='e-icons e-underline' overflow='Hide'></e-item>
          <e-item text='Font Color' prefixIcon='e-icons e-font-color' overflow='Hide'></e-item>
          <e-item text='Align Left' prefixIcon='e-icons e-align-left' overflow='None'></e-item>
          <e-item text='Align Center' prefixIcon='e-icons e-align-center' overflow='None'></e-item>
        </e-items>
      </ejs-toolbar>
      
      <div style="margin-top: 20px;">
        <button (click)="currentMode = 'Scrollable'">Scrollable</button>
        <button (click)="currentMode = 'Popup'">Popup</button>
        <button (click)="currentMode = 'MultiRow'">MultiRow</button>
        <button (click)="currentMode = 'Extended'">Extended</button>
      </div>
    </div>
  `
})
export class AppComponent {
  currentMode: OverflowMode = 'Scrollable';
}

---

scrollStep

Defines the distance (in pixels) to scroll when clicking navigation arrows in Scrollable mode.

Type: number Default: null

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <div>
      <h3>Scroll Step: {{ scrollStepValue }}px</h3>
      
      <ejs-toolbar 
        width="300px"
        [scrollStep]="scrollStepValue">
        <e-items>
          <e-item text='Item 1' prefixIcon='e-icons e-cut'></e-item>
          <e-item text='Item 2' prefixIcon='e-icons e-copy'></e-item>
          <e-item text='Item 3' prefixIcon='e-icons e-paste'></e-item>
          <e-item text='Item 4' prefixIcon='e-icons e-undo'></e-item>
          <e-item text='Item 5' prefixIcon='e-icons e-redo'></e-item>
          <e-item text='Item 6' prefixIcon='e-icons e-bold'></e-item>
          <e-item text='Item 7' prefixIcon='e-icons e-italic'></e-item>
          <e-item text='Item 8' prefixIcon='e-icons e-underline'></e-item>
        </e-items>
      </ejs-toolbar>
      
      <div style="margin-top: 20px;">
        <button (click)="scrollStepValue = 30">Small (30px)</button>
        <button (click)="scrollStepValue = 50">Medium (50px)</button>
        <button (click)="scrollStepValue = 100">Large (100px)</button>
        <button (click)="scrollStepValue = 150">Extra Large (150px)</button>
      </div>
    </div>
  `
})
export class AppComponent {
  scrollStepValue: number = 50;
}

---

width

Specifies the width of the toolbar in pixels, percentages, or as a number (treated as pixels).

Type: string | number Default: 'auto'

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <div>
      <h3>Width: {{ selectedWidth }}</h3>
      
      <ejs-toolbar [width]="selectedWidth">
        <e-items>
          <e-item text='Home'></e-item>
          <e-item text='About'></e-item>
          <e-item text='Services'></e-item>
          <e-item text='Contact' align='Right'></e-item>
        </e-items>
      </ejs-toolbar>
      
      <div style="margin-top: 20px;">
        <button (click)="selectedWidth = '300px'">300px</button>
        <button (click)="selectedWidth = '500px'">500px</button>
        <button (click)="selectedWidth = '100%'">Full Width (100%)</button>
        <button (click)="selectedWidth = '80%'">80% Width</button>
      </div>
    </div>
  `
})
export class AppComponent {
  selectedWidth: string | number = '100%';
}

---

Toolbar Events

beforeCreate

Fires before the toolbar component is rendered. Use this event to modify toolbar configuration before initialization.

Event Arguments: BeforeCreateArgs

• enableCollision (boolean): Control popup collision detection before creation
• name (string): Event name ('beforeCreate')
• scrollStep (number): Configure scrolling distance before creation

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar (beforeCreate)="onBeforeCreate($event)">
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item text='Copy'></e-item>
        <e-item text='Paste'></e-item>
      </e-items>
    </ejs-toolbar>
    
    <p>{{ beforeCreateMessage }}</p>
  `
})
export class AppComponent {
  beforeCreateMessage: string = '';

  onBeforeCreate(args: BeforeCreateArgs) {
    console.log('beforeCreate Event', args);
    
    // Modify configuration before toolbar creation
    args.scrollStep = 100;
    args.enableCollision = true;
    
    this.beforeCreateMessage = `Toolbar about to be created with scrollStep: ${args.scrollStep}px`;
  }
}

---

clicked

Fires when a toolbar item is clicked. Use this event to handle item actions and prevent default behavior if needed.

Event Arguments: ClickEventArgs

• cancel (boolean): Set to true to prevent the click action
• item (ItemModel): The clicked item object with all its properties
• name (string): Event name ('clicked')
• originalEvent (Event): The native DOM event object

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar (clicked)="onToolbarClicked($event)">
      <e-items>
        <e-item text='Save' id='save' prefixIcon='e-icons e-save'></e-item>
        <e-item text='Delete' id='delete' prefixIcon='e-icons e-delete'></e-item>
        <e-item text='Edit' id='edit' prefixIcon='e-icons e-edit'></e-item>
      </e-items>
    </ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <p>Clicked Item: {{ clickedItemText }}</p>
      <p>{{ clickMessage }}</p>
    </div>
  `
})
export class AppComponent {
  clickedItemText: string = 'None';
  clickMessage: string = '';

  onToolbarClicked(args: ClickEventArgs) {
    // Prevent deletion without confirmation
    if (args.item?.id === 'delete') {
      if (!confirm('Are you sure you want to delete?')) {
        args.cancel = true;
        this.clickMessage = 'Delete action cancelled';
        return;
      }
    }

    this.clickedItemText = args.item?.text || 'Unknown';
    this.clickMessage = `Item clicked: ${args.name}`;
    
    // Handle specific items
    switch (args.item?.id) {
      case 'save':
        this.clickMessage = 'Saving...';
        break;
      case 'delete':
        this.clickMessage = 'Deleting...';
        break;
      case 'edit':
        this.clickMessage = 'Editing...';
        break;
    }
  }
}

---

created

Fires after the toolbar component is created and rendered. Use this event for post-initialization setup.

Event Arguments: Event

• Standard DOM Event object

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar (created)="onToolbarCreated()">
      <e-items>
        <e-item text='Item 1'></e-item>
        <e-item text='Item 2'></e-item>
        <e-item text='Item 3'></e-item>
      </e-items>
    </ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <p>{{ creationMessage }}</p>
      <p>Toolbar Dimensions: {{ toolbarDimensions }}</p>
    </div>
  `
})
export class AppComponent {
  @ViewChild('toolbar') toolbarComponent!: ToolbarComponent;
  
  creationMessage: string = '';
  toolbarDimensions: string = '';

  onToolbarCreated() {
    this.creationMessage = 'Toolbar successfully created!';
    
    // Access toolbar element and get dimensions
    const toolbarElement = document.querySelector('.e-toolbar');
    if (toolbarElement) {
      const width = toolbarElement.clientWidth;
      const height = toolbarElement.clientHeight;
      this.toolbarDimensions =`W: ${width}px, H: ${height}px`;
    }
    
    console.log('Toolbar creation complete');
  }
}

---

keyDown

Fires when keyboard interaction occurs on the toolbar (arrow keys, Tab, etc.). Use this event to handle custom keyboard behaviors and navigation.

Event Arguments: KeyDownEventArgs

• cancel (boolean): Set to true to prevent the default keyboard action
• currentItem (HTMLElement): The currently focused toolbar item element
• name (string): Event name ('keyDown')
• nextItem (HTMLElement): The next toolbar item element in navigation direction
• originalEvent (KeyboardEventArgs): The native keyboard event object

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar [allowKeyboard]="true" (keyDown)="onKeyDown($event)">
      <e-items>
        <e-item text='Cut' id='cut' prefixIcon='e-icons e-cut'></e-item>
        <e-item text='Copy' id='copy' prefixIcon='e-icons e-copy'></e-item>
        <e-item text='Paste' id='paste' prefixIcon='e-icons e-paste'></e-item>
        <e-item type='Separator'></e-item>
        <e-item text='Undo' id='undo' prefixIcon='e-icons e-undo'></e-item>
        <e-item text='Redo' id='redo' prefixIcon='e-icons e-redo'></e-item>
      </e-items>
    </ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <p>Last Key Pressed: {{ lastKeyPressed }}</p>
      <p>Current Item: {{ currentItemText }}</p>
    </div>
  `
})
export class AppComponent {
  lastKeyPressed: string = 'None';
  currentItemText: string = 'None';

  onKeyDown(args: KeyDownEventArgs) {
    const event = args.originalEvent as KeyboardEvent;
    
    // Log keyboard interactions
    this.lastKeyPressed = event.key;
    
    // Get current item text from button element
    const button = args.currentItem?.querySelector('.e-tbar-btn');
    if (button) {
      this.currentItemText = button.textContent || 'Unknown';
    }

    // Custom keyboard shortcut handling
    if (event.ctrlKey && event.key === 'z') {
      // Handle custom Ctrl+Z behavior
      console.log('Custom Undo action');
      args.cancel = true; // Prevent default behavior
    }

    if (event.ctrlKey && event.key === 'y') {
      // Handle custom Ctrl+Y behavior
      console.log('Custom Redo action');
      args.cancel = true;
    }

    // Log navigation
    if (event.key === 'ArrowRight' && args.nextItem) {
      console.log('Moving to next item:', args.nextItem);
    }
  }
}

---

destroyed

Fires when the toolbar component is destroyed or removed from the DOM. Use this event for cleanup operations.

Event Arguments: Event

• Standard DOM Event object

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <div>
      <ejs-toolbar *ngIf="showToolbar" (destroyed)="onToolbarDestroyed()">
        <e-items>
          <e-item text='Save' id='save' prefixIcon='e-icons e-save'></e-item>
          <e-item text='Delete' id='delete' prefixIcon='e-icons e-delete'></e-item>
          <e-item text='Edit' id='edit' prefixIcon='e-icons e-edit'></e-item>
        </e-items>
      </ejs-toolbar>
      
      <div style="margin-top: 20px;">
        <button (click)="toggleToolbar()">
          {{ showToolbar ? 'Hide' : 'Show' }} Toolbar
        </button>
        <p>{{ destroyedMessage }}</p>
      </div>
    </div>
  `
})
export class AppComponent {
  showToolbar: boolean = true;
  destroyedMessage: string = '';

  toggleToolbar() {
    this.showToolbar = !this.showToolbar;
    if (!this.showToolbar) {
      this.destroyedMessage = '';
    }
  }

  onToolbarDestroyed() {
    // Cleanup operations
    this.destroyedMessage = 'Toolbar has been destroyed. Performing cleanup...';
    
    // Clear any cached data related to toolbar
    console.log('Toolbar destroyed - cleanup complete');
    
    // Unsubscribe from any observables
    // Close any open modals or popups
    // Restore scroll position or focus
  }
}

---

Toolbar Methods

addItems

Adds new items to the Toolbar. Accepts an array of items to be inserted at a specified index.

Method Signature:

addItems(items: ItemModel[], index?: number): void

Parameters:

• items (ItemModel[]): Array of items to be added to the Toolbar
• index (number, optional): Position to insert items. Default is 0 (beginning)

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent, ItemModel } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar #toolbar>
      <e-items>
        <e-item text='Cut' id='cut' prefixIcon='e-icons e-cut'></e-item>
        <e-item text='Copy' id='copy' prefixIcon='e-icons e-copy'></e-item>
      </e-items>
    </ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <button (click)="addNewItems()">Add Items at End</button>
      <button (click)="addAtBeginning()">Add Items at Beginning</button>
      <p>{{ statusMessage }}</p>
    </div>
  `
})
export class AppComponent {
  @ViewChild('toolbar') toolbar!: ToolbarComponent;
  statusMessage: string = '';

  addNewItems() {
    const newItems: ItemModel[] = [
      { text: 'Paste', prefixIcon: 'e-icons e-paste' },
      { type: 'Separator' },
      { text: 'Undo', prefixIcon: 'e-icons e-undo' }
    ];
    
    // Add items at the end
    this.toolbar.addItems(newItems);
    this.statusMessage = 'Added items at the end';
  }

  addAtBeginning() {
    const newItems: ItemModel[] = [
      { text: 'New', prefixIcon: 'e-icons e-new' },
      { text: 'Open', prefixIcon: 'e-icons e-open' }
    ];
    
    // Add items at index 0 (beginning)
    this.toolbar.addItems(newItems, 0);
    this.statusMessage = 'Added items at the beginning';
  }
}

---

destroy

Removes the toolbar component from the DOM and cleans up all related events. Use this method for proper cleanup when component is being destroyed.

Method Signature:

destroy(): void

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild, OnDestroy } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <div *ngIf="showToolbar">
      <ejs-toolbar #toolbar>
        <e-items>
          <e-item text='Item 1'></e-item>
          <e-item text='Item 2'></e-item>
        </e-items>
      </ejs-toolbar>
    </div>
    
    <button (click)="destroyToolbar()">Destroy Toolbar</button>
  `
})
export class AppComponent implements OnDestroy {
  @ViewChild('toolbar') toolbar!: ToolbarComponent;
  showToolbar: boolean = true;

  destroyToolbar() {
    // Properly destroy the toolbar component
    if (this.toolbar) {
      this.toolbar.destroy();
      this.showToolbar = false;
    }
  }

  ngOnDestroy() {
    // Cleanup when component is destroyed
    if (this.toolbar) {
      this.toolbar.destroy();
    }
  }
}

---

disable

Enable or disable the entire Toolbar component. When disabled, all toolbar items become inactive.

Method Signature:

disable(value: boolean): void

Parameters:

• value (boolean): true to disable, false to enable

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar #toolbar>
      <e-items>
        <e-item text='Cut' prefixIcon='e-icons e-cut'></e-item>
        <e-item text='Copy' prefixIcon='e-icons e-copy'></e-item>
        <e-item text='Paste' prefixIcon='e-icons e-paste'></e-item>
      </e-items>
    </ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <button (click)="toggleDisable()">
        {{ isDisabled ? 'Enable' : 'Disable' }} Toolbar
      </button>
      <p>Toolbar is {{ isDisabled ? 'DISABLED' : 'ENABLED' }}</p>
    </div>
  `
})
export class AppComponent {
  @ViewChild('toolbar') toolbar!: ToolbarComponent;
  isDisabled: boolean = false;

  toggleDisable() {
    this.isDisabled = !this.isDisabled;
    this.toolbar.disable(this.isDisabled);
  }
}

---

enableItems

Enable or disable specific toolbar items. Items can be referenced by index, HTMLElement, or NodeList.

Method Signature:

enableItems(items: number | HTMLElement | NodeList, isEnable?: boolean): void

Parameters:

• items (number | HTMLElement | NodeList): Index, DOM element, or NodeList of items to enable/disable
• isEnable (boolean, optional): true to enable, false to disable. Default is true

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar #toolbar>
      <e-items>
        <e-item text='Cut' id='cut' prefixIcon='e-icons e-cut'></e-item>
        <e-item text='Copy' id='copy' prefixIcon='e-icons e-copy'></e-item>
        <e-item text='Paste' id='paste' prefixIcon='e-icons e-paste'></e-item>
        <e-item text='Undo' id='undo' prefixIcon='e-icons e-undo'></e-item>
      </e-items>
    </ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <button (click)="togglePasteItem()">
        {{ pasteDisabled ? 'Enable' : 'Disable' }} Paste
      </button>
      <button (click)="disableByIndex(0)">Disable Cut (Index 0)</button>
      <button (click)="enableAll()">Enable All Items</button>
    </div>
  `
})
export class AppComponent {
  @ViewChild('toolbar') toolbar!: ToolbarComponent;
  pasteDisabled: boolean = false;

  togglePasteItem() {
    const pasteElement = document.getElementById('paste');
    this.pasteDisabled = !this.pasteDisabled;
    this.toolbar.enableItems(pasteElement, !this.pasteDisabled);
  }

  disableByIndex(index: number) {
    // Disable item at specific index
    this.toolbar.enableItems(index, false);
  }

  enableAll() {
    // Enable all toolbar items
    const allItems = document.querySelectorAll('.e-toolbar-item');
    this.toolbar.enableItems(allItems, true);
  }
}

---

hideItem

Show or hide a specific toolbar item by index or element reference.

Method Signature:

hideItem(index: number | HTMLElement | Element, value?: boolean): void

Parameters:

• index (number | HTMLElement | Element): Index or element reference of the item
• value (boolean, optional): true to hide, false to show. Default is false

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar #toolbar>
      <e-items>
        <e-item text='File' id='file' prefixIcon='e-icons e-folder'></e-item>
        <e-item text='Edit' id='edit' prefixIcon='e-icons e-edit'></e-item>
        <e-item text='View' id='view' prefixIcon='e-icons e-view'></e-item>
        <e-item text='Format' id='format' prefixIcon='e-icons e-format'></e-item>
        <e-item text='Tools' id='tools' prefixIcon='e-icons e-settings'></e-item>
      </e-items>
    </ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <button (click)="toggleFormatItem()">
        {{ formatHidden ? 'Show' : 'Hide' }} Format Menu
      </button>
      <button (click)="hideByIndex(4)">Hide Tools Menu</button>
    </div>
  `
})
export class AppComponent {
  @ViewChild('toolbar') toolbar!: ToolbarComponent;
  formatHidden: boolean = false;

  toggleFormatItem() {
    const formatElement = document.getElementById('format');
    this.formatHidden = !this.formatHidden;
    this.toolbar.hideItem(formatElement, this.formatHidden);
  }

  hideByIndex(index: number) {
    // Hide item at specific index
    this.toolbar.hideItem(index, true);
  }
}

---

refreshOverflow

Refresh the toolbar component without re-rendering. Useful after dynamically adding/removing items or changing the container size.

Method Signature:

refreshOverflow(): void

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent, ItemModel } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <div [style.width]="toolbarWidth">
      <ejs-toolbar #toolbar overflowMode="Popup">
        <e-items>
          <e-item text='Item 1'></e-item>
          <e-item text='Item 2'></e-item>
          <e-item text='Item 3'></e-item>
          <e-item text='Item 4'></e-item>
          <e-item text='Item 5'></e-item>
        </e-items>
      </ejs-toolbar>
    </div>
    
    <div style="margin-top: 20px;">
      <button (click)="narrowToolbar()">Narrow (300px)</button>
      <button (click)="normalToolbar()">Normal (600px)</button>
      <button (click)="wideToolbar()">Wide (800px)</button>
      <p>Width: {{ toolbarWidth }}</p>
    </div>
  `
})
export class AppComponent {
  @ViewChild('toolbar') toolbar!: ToolbarComponent;
  toolbarWidth: string = '600px';

  narrowToolbar() {
    this.toolbarWidth = '300px';
    // Refresh after width change to recalculate overflow
    setTimeout(() => this.toolbar.refreshOverflow(), 100);
  }

  normalToolbar() {
    this.toolbarWidth = '600px';
    setTimeout(() => this.toolbar.refreshOverflow(), 100);
  }

  wideToolbar() {
    this.toolbarWidth = '800px';
    setTimeout(() => this.toolbar.refreshOverflow(), 100);
  }
}

---

removeItems

Remove one or more items from the toolbar by index, element reference, or array of items.

Method Signature:

removeItems(args: number | HTMLElement | NodeList | Element | HTMLElement[]): void

Parameters:

• args (number | HTMLElement | NodeList | Element | HTMLElement[]): Index, DOM element, or array of elements to remove

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar #toolbar>
      <e-items>
        <e-item text='Cut' id='cut' prefixIcon='e-icons e-cut'></e-item>
        <e-item text='Copy' id='copy' prefixIcon='e-icons e-copy'></e-item>
        <e-item text='Paste' id='paste' prefixIcon='e-icons e-paste'></e-item>
        <e-item type='Separator' id='sep1'></e-item>
        <e-item text='Undo' id='undo' prefixIcon='e-icons e-undo'></e-item>
        <e-item text='Redo' id='redo' prefixIcon='e-icons e-redo'></e-item>
      </e-items>
    </ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <button (click)="removeByIndex(0)">Remove Cut (Index 0)</button>
      <button (click)="removeByElement()">Remove Paste (Element)</button>
      <button (click)="removeMultiple()">Remove Undo & Redo</button>
      <button (click)="resetToolbar()">Reset Toolbar</button>
    </div>
  `
})
export class AppComponent {
  @ViewChild('toolbar') toolbar!: ToolbarComponent;

  removeByIndex(index: number) {
    this.toolbar.removeItems(index);
    console.log(`Item at index ${index} removed`);
  }

  removeByElement() {
    const pasteElement = document.getElementById('paste');
    if (pasteElement) {
      this.toolbar.removeItems(pasteElement);
      console.log('Paste item removed');
    }
  }

  removeMultiple() {
    const undoElement = document.getElementById('undo');
    const redoElement = document.getElementById('redo');
    
    if (undoElement && redoElement) {
      // Remove multiple elements
      this.toolbar.removeItems([undoElement, redoElement]);
      console.log('Multiple items removed');
    }
  }

  resetToolbar() {
    // Add items back
    this.toolbar.addItems([
      { text: 'Undo', id: 'undo', prefixIcon: 'e-icons e-undo' },
      { text: 'Redo', id: 'redo', prefixIcon: 'e-icons e-redo' }
    ]);
  }
}

---

Item Configuration Properties

align

Aligns the toolbar item to the left, center, or right side of the toolbar.

Type: ItemAlign ('Left' | 'Center' | 'Right') Default: 'Left'

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Home' align='Left'></e-item>
        <e-item text='About' align='Left'></e-item>
        <e-item text='Center Item' align='Center'></e-item>
        <e-item text='Search' align='Right'></e-item>
        <e-item text='Settings' align='Right'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

---

cssClass

Adds custom CSS classes to individual toolbar items for styling.

Type: string Default: ''

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Primary' cssClass='primary-btn'></e-item>
        <e-item text='Success' cssClass='success-btn' type='Separator'></e-item>
        <e-item text='Danger' cssClass='danger-btn'></e-item>
      </e-items>
    </ejs-toolbar>
  `,
  styles: [`
    :host ::ng-deep .primary-btn.e-tbar-btn {
      background: #2196f3;
      color: white;
    }
    
    :host ::ng-deep .success-btn.e-tbar-btn {
      background: #4caf50;
      color: white;
    }
    
    :host ::ng-deep .danger-btn.e-tbar-btn {
      background: #f44336;
      color: white;
    }
  `]
})
export class AppComponent { }

---

disabled

Disables the toolbar item, making it unclickable and visually grayed out.

Type: boolean Default: false

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar [items]="toolbarItems"></ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <button (click)="toggleDisabled('paste')">
        {{ isPasteDisabled ? 'Enable' : 'Disable' }} Paste
      </button>
    </div>
  `
})
export class AppComponent {
  isPasteDisabled: boolean = true;

  toolbarItems: ItemModel[] = [
    { text: 'Cut', prefixIcon: 'e-icons e-cut', disabled: false },
    { text: 'Copy', prefixIcon: 'e-icons e-copy', disabled: false },
    { text: 'Paste', id: 'paste', prefixIcon: 'e-icons e-paste', disabled: true }
  ];

  toggleDisabled(itemId: string) {
    const item = this.toolbarItems.find(i => i.id === itemId);
    if (item) {
      item.disabled = !item.disabled;
      if (itemId === 'paste') {
        this.isPasteDisabled = item.disabled;
      }
    }
  }
}

---

htmlAttributes

Adds HTML attributes to the item element, supporting style, class, data attributes, etc.

Type: { [key: string]: string } Default: {}

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item 
          text='Custom Item'
          [htmlAttributes]="{ 'data-test-id': 'custom-item', style: 'min-width: 150px;' }">
        </e-item>
        <e-item 
          text='Styled Item'
          [htmlAttributes]="{ style: 'background: #fff9c4; padding: 10px;' }">
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

---

id

Specifies a unique identifier for the toolbar item.

Type: string Default: ''

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar (clicked)="onItemClick($event)">
      <e-items>
        <e-item text='Save' id='saveBtn'></e-item>
        <e-item text='Edit' id='editBtn'></e-item>
        <e-item text='Delete' id='deleteBtn'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  onItemClick(event: any) {
    console.log(`Clicked item ID: ${event.item?.id}`);
  }
}

---

overflow

Controls where an item is displayed in Popup mode overflow.

Type: OverflowOption ('Show' | 'Hide' | 'None') Default: 'None'

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar overflowMode="Popup" width="300px">
      <e-items>
        <!-- Always visible on toolbar -->
        <e-item text='Cut' overflow='Show' prefixIcon='e-icons e-cut'></e-item>
        <!-- Always visible in popup -->
        <e-item text='Copy' overflow='Hide' prefixIcon='e-icons e-copy'></e-item>
        <!-- Normal priority, moves to popup when needed -->
        <e-item text='Paste' overflow='None' prefixIcon='e-icons e-paste'></e-item>
        <!-- Normal priority -->
        <e-item text='Format' overflow='None' prefixIcon='e-icons e-format'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

---

prefixIcon

Displays an icon before the item text.

Type: string Default: ''

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Home' prefixIcon='e-icons e-home'></e-item>
        <e-item text='Cut' prefixIcon='e-icons e-cut'></e-item>
        <e-item text='Copy' prefixIcon='e-icons e-copy'></e-item>
        <e-item text='Paste' prefixIcon='e-icons e-paste'></e-item>
        <e-item text='Bold' prefixIcon='e-icons e-bold'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

---

suffixIcon

Displays an icon after the item text.

Type: string Default: ''

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Download' suffixIcon='e-icons e-download'></e-item>
        <e-item text='Upload' suffixIcon='e-icons e-upload'></e-item>
        <e-item text='Settings' suffixIcon='e-icons e-settings'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

---

showAlwaysInPopup

Defines the priority of items to always display in popup. Maintains toolbar item on popup always but does not work for toolbar priority items.

Type: boolean Default: false

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar overflowMode="Popup" width="350px">
      <e-items>
        <e-item text='Cut' prefixIcon='e-icons e-cut' overflow='Show'></e-item>
        <e-item text='Copy' prefixIcon='e-icons e-copy' overflow='Show'></e-item>
        <e-item text='Paste' prefixIcon='e-icons e-paste' overflow='Show'></e-item>
        <e-item type='Separator'></e-item>
        <e-item 
          text='Always in Popup' 
          prefixIcon='e-icons e-more'
          [showAlwaysInPopup]="true"
          overflow='None'>
        </e-item>
        <e-item 
          text='Normal Item' 
          prefixIcon='e-icons e-settings'
          [showAlwaysInPopup]="false">
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

---

showTextOn

Specifies when item text is displayed in Popup mode.

Type: DisplayMode ('Toolbar' | 'Overflow' | 'Both') Default: 'Both'

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar overflowMode="Popup" width="300px">
      <e-items>
        <e-item 
          text='Show Both' 
          showTextOn='Both'
          prefixIcon='e-icons e-cut'
          overflow='Show'>
        </e-item>
        <e-item 
          text='Only In Popup' 
          showTextOn='Overflow'
          prefixIcon='e-icons e-copy'
          overflow='Show'>
        </e-item>
        <e-item 
          text='Only On Toolbar' 
          showTextOn='Toolbar'
          prefixIcon='e-icons e-paste'
          overflow='Hide'>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

---

tabIndex

Specifies the tab order for keyboard navigation.

Type: number Default: 0

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar [allowKeyboard]="true">
      <e-items>
        <e-item text='Primary' [tabIndex]="1"></e-item>
        <e-item text='Secondary' [tabIndex]="2"></e-item>
        <e-item text='Tertiary' [tabIndex]="3"></e-item>
      </e-items>
    </ejs-toolbar>
    
    <p>Use Tab key to navigate items in order</p>
  `
})
export class AppComponent { }

---

template

Renders custom HTML or Angular components as toolbar items.

Type: string | object Default: undefined

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

@Component({
  imports: [ToolbarModule, FormsModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Regular Item'></e-item>
        <e-item template="<input type='text' placeholder='Search...' style='padding: 5px;'></e-item>
        <e-item template="<select style='padding: 5px;'><option>All</option><option>Images</option><option>Videos</option></select>"></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

---

text

Specifies the text content displayed on the toolbar item.

Type: string Default: ''

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='File'></e-item>
        <e-item text='Edit'></e-item>
        <e-item text='View'></e-item>
        <e-item text='Help' align='Right'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

---

tooltipText

Specifies text displayed when hovering over the toolbar item.

Type: string Default: ''

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item 
          text='Save'
          prefixIcon='e-icons e-save'
          tooltipText='Save Document (Ctrl+S)'>
        </e-item>
        <e-item 
          text='Delete'
          prefixIcon='e-icons e-delete'
          tooltipText='Delete Selected Item'>
        </e-item>
        <e-item 
          text='Settings'
          prefixIcon='e-icons e-settings'
          tooltipText='Open Settings'>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

---

type

Specifies the type of toolbar item (Button, Separator, or Input).

Type: ItemType ('Button' | 'Separator' | 'Input') Default: 'Button'

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Cut' type='Button'></e-item>
        <e-item text='Copy' type='Button'></e-item>
        <e-item type='Separator'></e-item>
        <e-item text='Paste' type='Button'></e-item>
        <e-item type='Input' template="<input type='text' placeholder='Search...' />"></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

---

visible

Controls whether the toolbar item is visible or hidden.

Type: boolean Default: true

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar [items]="toolbarItems"></ejs-toolbar>
    
    <div style="margin-top: 20px;">
      <label>
        <input type="checkbox" [checked]="showAdvanced" 
               (change)="toggleAdvancedOptions()">
        Show Advanced Options
      </label>
    </div>
  `
})
export class AppComponent {
  showAdvanced: boolean = false;

  toolbarItems: ItemModel[] = [
    { text: 'Cut', prefixIcon: 'e-icons e-cut', visible: true },
    { text: 'Copy', prefixIcon: 'e-icons e-copy', visible: true },
    { text: 'Paste', prefixIcon: 'e-icons e-paste', visible: true },
    { type: 'Separator', visible: true },
    { text: 'Advanced 1', visible: false },
    { text: 'Advanced 2', visible: false }
  ];

  toggleAdvancedOptions() {
    this.showAdvanced = !this.showAdvanced;
    this.toolbarItems.forEach((item, idx) => {
      if (idx > 3) {
        item.visible = this.showAdvanced;
      }
    });
  }
}

---

width

Specifies the width of the toolbar item in pixels or percentage.

Type: number | string Default: auto

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Short' width='60px'></e-item>
        <e-item text='Medium Width Item' width='150px'></e-item>
        <e-item text='Wide Item' width='250px'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

---

click

Specifies a custom click event handler for individual toolbar items. When defined, executes the handler function when the item is clicked instead of relying solely on the toolbar's clicked event.

Type: Function | string Default: undefined

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item
          id="save"
          text="Save"
          prefixIcon="e-icons e-save"
          (click)="handleClick($event)"
        >
        </e-item>

        <e-item
          id="delete"
          text="Delete"
          prefixIcon="e-icons e-delete"
          (click)="handleClick($event)"
        >
        </e-item>

        <e-item
          id="print"
          text="Print"
          prefixIcon="e-icons e-print"
          (click)="handleClick($event)"
        >
        </e-item>
      </e-items>
    </ejs-toolbar>

    <div style="margin-top: 20px;">
      <p>Last Action: {{ lastAction }}</p>
    </div>
  `
})
export class AppComponent {
  lastAction: string = 'None';

  handleClick(args: ClickEventArgs): void {
    const id = args.item?.id;

    switch (id) {
      case 'save':
        this.handleSave();
        break;
      case 'delete':
        this.handleDelete();
        break;
      case 'print':
        this.handlePrint();
        break;
      default:
        this.lastAction = 'Unknown action';
    }
  }

  handleSave(): void {
    this.lastAction = 'Saving document...';
    console.log('Save item clicked');
  }

  handleDelete(): void {
    if (confirm('Are you sure you want to delete?')) {
      this.lastAction = 'Item deleted';
      console.log('Delete confirmed');
    } else {
      this.lastAction = 'Delete cancelled';
    }
  }

  handlePrint(): void {
    this.lastAction = 'Printing document...';
    window.print();
  }
}

---

Types & Enums

ItemType

Enum for toolbar item types:

enum ItemType {
  Button = 'Button',      // Standard clickable button
  Separator = 'Separator', // Visual divider line
  Input = 'Input'         // Input container for templates
}

ItemAlign

Enum for item alignment:

enum ItemAlign {
  Left = 'Left',      // Align to left
  Center = 'Center',  // Align to center
  Right = 'Right'     // Align to right
}

OverflowMode

Enum for overflow behavior:

enum OverflowMode {
  Scrollable = 'Scrollable',  // Horizontal scrolling with arrows
  Popup = 'Popup',            // Items move to dropdown popup
  MultiRow = 'MultiRow',      // Items wrap to multiple rows
  Extended = 'Extended'       // Items expand in next row with button
}

OverflowOption

Enum for item overflow priority:

enum OverflowOption {
  Show = 'Show',    // Always visible on toolbar
  Hide = 'Hide',    // Always visible in popup
  None = 'None'     // Normal priority (default)
}

DisplayMode

Enum for text display in popup mode:

enum DisplayMode {
  Toolbar = 'Toolbar',    // Text shown only on toolbar
  Overflow = 'Overflow',  // Text shown only in popup
  Both = 'Both'           // Text shown on both toolbar and popup
}

---

Complete API Examples

Example 1: Advanced Toolbar with All Features

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent, ItemModel } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [ToolbarModule, CommonModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar 
      #toolbar
      [allowKeyboard]="true"
      [enableRtl]="isRtl"
      cssClass="custom-toolbar"
      [overflowMode]="overflow"
      [width]="width"
      [height]="height"
      [items]="toolbarItems"
      (beforeCreate)="onBeforeCreate($event)"
      (clicked)="onClicked($event)"
      (created)="onCreated()">
    </ejs-toolbar>
    
    <div style="margin: 20px; padding: 20px; background: #f5f5f5;">
      <h3>Toolbar Status</h3>
      <p>Selected Item: {{ selectedItem }}</p>
      <p>Total Items: {{ toolbarItems.length }}</p>
      
      <div style="margin-top: 20px;">
        <button (click)="changeOverflow('Scrollable')">Scrollable</button>
        <button (click)="changeOverflow('Popup')">Popup</button>
        <button (click)="isRtl = !isRtl">Toggle RTL</button>
        <button (click)="addItem()">Add Item</button>
      </div>
    </div>
  `,
  styles: [`
    :host ::ng-deep .custom-toolbar {
      background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    }
    
    :host ::ng-deep .custom-toolbar .e-tbar-btn {
      color: #fff;
      border: none;
    }
  `]
})
export class AppComponent {
  @ViewChild('toolbar') toolbarComponent!: ToolbarComponent;
  
  isRtl: boolean = false;
  overflow: string = 'Scrollable';
  width: string = '100%';
  height: string = '50px';
  selectedItem: string = 'None';

  toolbarItems: ItemModel[] = [
    { text: 'New', prefixIcon: 'e-icons e-new', id: 'new' },
    { text: 'Open', prefixIcon: 'e-icons e-open', id: 'open' },
    { text: 'Save', prefixIcon: 'e-icons e-save', id: 'save' },
    { type: 'Separator' },
    { text: 'Cut', prefixIcon: 'e-icons e-cut', id: 'cut' },
    { text: 'Copy', prefixIcon: 'e-icons e-copy', id: 'copy' },
    { text: 'Paste', prefixIcon: 'e-icons e-paste', id: 'paste', disabled: true },
    { type: 'Separator' },
    { text: 'Undo', prefixIcon: 'e-icons e-undo', id: 'undo' },
    { text: 'Redo', prefixIcon: 'e-icons e-redo', id: 'redo' },
    { text: 'Help', prefixIcon: 'e-icons e-help', align: 'Right', id: 'help' }
  ];

  onBeforeCreate(args: any) {
    console.log('Toolbar about to be created');
  }

  onClicked(args: any) {
    this.selectedItem = args.item?.text || 'Unknown';
  }

  onCreated() {
    console.log('Toolbar created successfully');
  }

  changeOverflow(mode: string) {
    this.overflow = mode;
  }

  addItem() {
    this.toolbarItems.push({
      text: `Item ${this.toolbarItems.length}`,
      prefixIcon: 'e-icons e-more'
    });
  }
}

---

Example 2: Responsive Toolbar with Dynamic Configuration

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [ToolbarModule, CommonModule],
  standalone: true,
  selector: 'app-toolbar',
  template: `
    <ejs-toolbar 
      [overflowMode]="isMobile ? 'Popup' : 'Scrollable'"
      [scrollStep]="isMobile ? 30 : 50"
      [width]="'100%'"
      [items]="toolbarItems">
    </ejs-toolbar>
  `
})
export class AppComponent implements OnInit {
  isMobile: boolean = false;

  toolbarItems: ItemModel[] = [
    { text: 'Home', prefixIcon: 'e-icons e-home' },
    { text: 'Product', prefixIcon: 'e-icons e-boxes' },
    { text: 'Service', prefixIcon: 'e-icons e-settings' },
    { type: 'Separator' },
    { text: 'Account', align: 'Right', prefixIcon: 'e-icons e-user' }
  ];

  ngOnInit() {
    this.checkScreenSize();
    window.addEventListener('resize', () => this.checkScreenSize());
  }

  checkScreenSize() {
    this.isMobile = window.innerWidth < 768;
  }
}

Command Events & Customization

Table of Contents

• Click Event Handling
• HTML Attributes Customization
• CSS Class Customization
• Custom HTML Attributes
• Combining htmlAttributes and cssClass
• Event-Driven Patterns

Click Event Handling

Implement click event handlers for toolbar items using component methods.

Basic Click Handler

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Cut' (click)="onCut()"></e-item>
        <e-item text='Copy' (click)="onCopy()"></e-item>
        <e-item text='Paste' (click)="onPaste()"></e-item>
      </e-items>
    </ejs-toolbar>
    <p>{{ message }}</p>
  `
})
export class AppComponent {
  message: string = '';

  onCut() {
    this.message = 'Cut executed';
  }

  onCopy() {
    this.message = 'Copy executed';
  }

  onPaste() {
    this.message = 'Paste executed';
  }
}

Click with Item ID

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item id='btn_cut' text='Cut' (click)="handleClick('cut')"></e-item>
        <e-item id='btn_copy' text='Copy' (click)="handleClick('copy')"></e-item>
        <e-item id='btn_paste' text='Paste' (click)="handleClick('paste')"></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  handleClick(command: string) {
    console.log(`Executing: ${command}`);
  }
}

HTML Attributes Customization

The htmlAttributes property enables setting custom HTML attributes for toolbar commands.

htmlAttributes Property

The htmlAttributes property accepts an object with HTML attributes:

• class - CSS classes (appended, not replaced)
• id - Element ID
• style - Inline CSS styles (replaced)
• role - ARIA role for accessibility
• data-* - Custom data attributes

Basic htmlAttributes Example

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Bold' [htmlAttributes]="boldAttr"></e-item>
        <e-item text='Italic' [htmlAttributes]="italicAttr"></e-item>
        <e-item text='Underline' [htmlAttributes]="underAttr"></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  boldAttr = { 'class': 'custom_bold', 'id': 'bold_btn' };
  italicAttr = { 'class': 'custom_italic', 'id': 'italic_btn' };
  underAttr = { 'class': 'custom_underline', 'id': 'under_btn' };
}

htmlAttributes with Styles

boldAttr = {
  'id': 'bold_button',
  'style': 'background-color: #ffeb3b; font-weight: bold;',
  'data-command': 'bold'
};

htmlAttributes with Multiple Classes

Important: Multiple CSS classes are appended to existing classes, not replaced. Existing style classes are preserved.

boldAttr = {
  'class': 'custom_bold active-state hover-effect'
};

Rendered HTML:

<!-- Original classes + new classes -->
<button class="e-btn e-tbar-btn custom_bold active-state hover-effect">Bold</button>

htmlAttributes with ARIA Attributes

boldAttr = {
  'role': 'button',
  'aria-label': 'Make text bold',
  'aria-pressed': 'false'
};

italicAttr = {
  'role': 'button',
  'aria-label': 'Make text italic'
};

CSS Class Customization

Use the cssClass property for straightforward CSS class management.

cssClass Property

The cssClass property adds one or more CSS classes to toolbar items without replacing existing classes.

Single CSS Class

<e-item text='Bold' cssClass='e-bold'></e-item>
<e-item text='Italic' cssClass='e-italic'></e-item>
<e-item text='Underline' cssClass='e-underline'></e-item>

Multiple CSS Classes

<e-item text='Bold' cssClass='e-bold active primary'></e-item>
<e-item text='Delete' cssClass='e-danger hover-red'></e-item>
<e-item text='Save' cssClass='e-success hover-green'></e-item>

cssClass vs htmlAttributes

Use `cssClass` when:

• Adding simple CSS classes only
• No other HTML attributes needed
• Straightforward styling scenarios

Use `htmlAttributes` when:

• Setting multiple attributes (id, style, role, data-*)
• Need custom styling in inline style attribute
• Require ARIA attributes for accessibility

Custom HTML Attributes

Comprehensive example with multiple custom attributes.

Complete Example

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Bold' [htmlAttributes]='boldAttribute'></e-item>
        <e-item text='Italic' [htmlAttributes]='italicAttribute'></e-item>
        <e-item text='Underline' [htmlAttributes]='underAttribute'></e-item>
        <e-item type='Separator'></e-item>
        <e-item text='Uppercase' cssClass='e-txt-casing'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  boldAttribute: any = {
    'class': 'custom_bold',
    'id': 'itemId',
    'data-command': 'bold',
    'title': 'Make text bold (Ctrl+B)'
  };

  italicAttribute: any = {
    'class': 'custom_italic',
    'id': 'italic_btn',
    'data-command': 'italic',
    'title': 'Make text italic (Ctrl+I)'
  };

  underAttribute: any = {
    'class': 'custom_underline',
    'id': 'under_btn',
    'data-command': 'underline',
    'title': 'Underline text (Ctrl+U)'
  };
}

With Style Attributes

boldAttribute: any = {
  'class': 'custom_bold',
  'id': 'bold_btn',
  'style': 'background-color: #fff3cd; border: 1px solid #ffc107;',
  'aria-label': 'Bold formatting',
  'aria-pressed': 'false'
};

Combining htmlAttributes and cssClass

Both properties can be used together for complete customization.

Combined Example

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Save'
                 cssClass='action-button'
                 [htmlAttributes]='saveAttr'
                 (click)="onSave()"></e-item>
        
        <e-item text='Delete'
                 cssClass='danger-button'
                 [htmlAttributes]='deleteAttr'
                 (click)="onDelete()"></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  saveAttr = {
    'id': 'save_btn',
    'data-tooltip': 'Save document',
    'aria-label': 'Save'
  };

  deleteAttr = {
    'id': 'delete_btn',
    'data-tooltip': 'Delete selected items',
    'aria-label': 'Delete'
  };

  onSave() {
    console.log('Save clicked');
  }

  onDelete() {
    console.log('Delete clicked');
  }
}

Result:

• cssClass adds CSS styling classes
• htmlAttributes adds attributes and IDs
• Both work together without conflict

Event-Driven Patterns

Pattern 1: Command Dispatch

handleCommand(command: string, payload?: any) {
  switch(command) {
    case 'cut':
      console.log('Cut:', payload);
      break;
    case 'copy':
      console.log('Copy:', payload);
      break;
    case 'paste':
      console.log('Paste:', payload);
      break;
  }
}

Template:

<e-item text='Cut' (click)="handleCommand('cut')"></e-item>
<e-item text='Copy' (click)="handleCommand('copy')"></e-item>
<e-item text='Paste' (click)="handleCommand('paste')"></e-item>

Pattern 2: Action Method Mapping

actions = {
  cut: () => this.cutText(),
  copy: () => this.copyText(),
  paste: () => this.pasteText(),
  undo: () => this.undoAction(),
  redo: () => this.redoAction()
};

executeAction(actionKey: string) {
  const action = this.actions[actionKey];
  if (action) {
    action();
  }
}

cutText() { /* implementation */ }
copyText() { /* implementation */ }
pasteText() { /* implementation */ }
undoAction() { /* implementation */ }
redoAction() { /* implementation */ }

Pattern 3: State-Based Customization

getItemAttributes(itemId: string): any {
  const baseAttrs = {
    'id': `btn_${itemId}`,
    'class': 'custom-item'
  };

  if (this.isDisabled(itemId)) {
    return { ...baseAttrs, 'disabled': 'true' };
  }

  if (this.isActive(itemId)) {
    return { ...baseAttrs, 'class': 'custom-item active' };
  }

  return baseAttrs;
}

Getting Started with Angular Toolbar

Table of Contents

• Installation
• Angular CLI Setup
• Syncfusion Package Installation
• Add Toolbar Component
• CSS Theme Import
• Run Application
• Basic Example

Installation

The Syncfusion Angular Toolbar component requires the @syncfusion/ej2-angular-navigations package and its dependencies.

Dependencies

The Toolbar component depends on the following Syncfusion packages:

@syncfusion/ej2-angular-navigations
  ├── @syncfusion/ej2-base
  ├── @syncfusion/ej2-angular-base
  └── @syncfusion/ej2-navigations
      ├── @syncfusion/ej2-buttons
      └── @syncfusion/ej2-popups

Angular CLI Setup

Install Angular CLI

If you haven't already installed Angular CLI, use the following command:

npm install -g @angular/cli

Install Specific Angular Version

To install a particular version of Angular CLI:

npm install -g @angular/cli@21.0.0

Create New Angular Project

Use the Angular CLI to create a new application:

ng new syncfusion-angular-app

Configure during setup:

• Choose stylesheet format (CSS, SCSS, LESS)
• Enable Angular routing if needed
• Configure Server-side rendering (SSR) if required
• Select AI tool preference

Navigate to project directory:

cd syncfusion-angular-app

Note: Angular 20+ uses simplified structure (src/app/app.ts) instead of separate .component.ts files.

Syncfusion Package Installation

Modern Ivy Distribution (Angular 12+)

Syncfusion packages from version 20.2.36+ support Angular Ivy rendering engine. Install using:

npm install @syncfusion/ej2-angular-navigations --save

Legacy ngcc Package (Angular <12)

For Angular versions below 12, install the legacy ngcc package:

npm install @syncfusion/ej2-angular-navigations@ngcc --save

Update package.json to include the ngcc suffix:

"@syncfusion/ej2-angular-navigations": "20.2.38-ngcc"

Warning: If ngcc tag is not specified, Ivy package installs and may throw warnings.

Add Toolbar Component

Import ToolbarModule

In your component file (e.g., src/app/app.component.ts), import the ToolbarModule:

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

Standalone Component Setup

The Toolbar is configured as a standalone component by: 1. Importing ToolbarModule in the imports array 2. Setting standalone: true 3. Using <ejs-toolbar> selector with <e-items> and <e-item> directive elements

CSS Theme Import

The Toolbar requires CSS theme files to display properly. Add the following imports to your src/styles.css file:

@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';

Available Theme Packages:

• material3.css - Material Design 3 (Default)
• bootstrap.css - Bootstrap theme
• tailwind.css - Tailwind CSS theme

Choose one theme package based on your design requirements.

Run Application

After setup and configuration, run the application using:

npm start

The application will open at http://localhost:4200 by default. The Toolbar component will render with the configured items.

Basic Example

Minimal Toolbar

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 text='Paste'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

Complete Example with Bootstrap

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

Toolbar with Icons

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' prefixIcon='e-icons e-cut'></e-item>
        <e-item text='Copy' prefixIcon='e-icons e-copy'></e-item>
        <e-item text='Paste' prefixIcon='e-icons e-paste'></e-item>
        <e-item type='Separator'></e-item>
        <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='Underline' prefixIcon='e-icons e-underline'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

Expected Output

After running the application, you should see a horizontal toolbar with buttons displaying:

• Cut, Copy, Paste buttons
• Separator divider
• Bold, Italic, Underline buttons

Each button is clickable and ready for event binding.

Item Configuration

Table of Contents

• Button Items
• Separator Items
• Input Items
• NumericTextBox in Toolbar
• DropDownList in Toolbar
• CheckBox in Toolbar
• RadioButton in Toolbar
• Tab Key Navigation

Button Items

Button is the default item type and renders button commands in the toolbar. It's configured using the <e-item> directive.

Button Properties

Basic Button Example

<ejs-toolbar>
  <e-items>
    <e-item text='Cut'></e-item>
    <e-item text='Copy'></e-item>
    <e-item text='Paste'></e-item>
  </e-items>
</ejs-toolbar>

Button with Icons

Prefix Icon (before text):

<e-item text='Cut' prefixIcon='e-icons e-cut'></e-item>
<e-item text='Copy' prefixIcon='e-icons e-copy'></e-item>
<e-item text='Paste' prefixIcon='e-icons e-paste'></e-item>

Suffix Icon (after text):

<e-item text='Undo' suffixIcon='e-icons e-undo'></e-item>
<e-item text='Redo' suffixIcon='e-icons e-redo'></e-item>

Note: If both prefixIcon and suffixIcon are specified, only prefixIcon displays.

Button with Width and Alignment

<e-item text='Save' width='120px'></e-item>
<e-item text='Settings' align='Right'></e-item>
<e-item text='Help' align='Center'></e-item>

Separator Items

The Separator type adds a vertical divider between toolbar items to group related commands.

Separator Example

<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='Undo'></e-item>
    <e-item text='Redo'></e-item>
  </e-items>
</ejs-toolbar>

Output:

Cut | Copy | || Paste || Undo | Redo

Important Notes

• If a Separator is added as the first or last item, it is not visible
• Separators help visually group related toolbar commands
• Separators don't have any properties beyond type='Separator'

Input Items

The Input type allows embedding Syncfusion input-based components within toolbar items. This is configured with the <ng-template #template> directive.

Input Type Configuration

<e-item type='Input'>
  <ng-template #template>
    <!-- Component goes here -->
  </ng-template>
</e-item>

Important: Set type='Input' ONLY for input-based components. The ng-template with #template attribute is mandatory.

NumericTextBox in Toolbar

Setup

1. Import NumericTextBoxModule from @syncfusion/ej2-angular-inputs 2. Set item type='Input' 3. Use ng-template to define the NumericTextBox component

Example

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

@Component({
  imports: [ToolbarModule, NumericTextBoxModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item type='Input'>
          <ng-template #template>
            <ejs-numerictextbox format="c2" value="1" width="150"></ejs-numerictextbox>
          </ng-template>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

Configuration

NumericTextBox properties within template:

• format="c2" - Currency format with 2 decimal places
• value="1" - Default value
• width="150" - Width of the input

DropDownList in Toolbar

Setup

1. Import DropDownListModule from @syncfusion/ej2-angular-dropdowns 2. Set item type='Input' 3. Bind data source to the dropdown

Example

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

@Component({
  imports: [ToolbarModule, DropDownListModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item type='Input'>
          <ng-template #template>
            <ejs-dropdownlist [dataSource]='data' width="120" index="2"></ejs-dropdownlist>
          </ng-template>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  public data: string[] = ['Badminton', 'Basketball', 'Cricket', 'Golf', 'Hockey', 'Rugby'];
}

CheckBox in Toolbar

Setup

1. Import CheckBoxModule from @syncfusion/ej2-angular-buttons 2. Set item type='Input' 3. Configure checkbox properties

Example

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

@Component({
  imports: [ToolbarModule, CheckBoxModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item type='Input'>
          <ng-template #template>
            <ejs-checkbox label="Enable Feature" [checked]="true"></ejs-checkbox>
          </ng-template>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

RadioButton in Toolbar

Setup

1. Import RadioButtonModule from @syncfusion/ej2-angular-buttons 2. Set item type='Input' 3. Configure radio button with name grouping

Example

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

@Component({
  imports: [ToolbarModule, RadioButtonModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item type='Input'>
          <ng-template #template>
            <ejs-radiobutton label='Option 1' name='group1' checked="true"></ejs-radiobutton>
          </ng-template>
        </e-item>
        <e-item type='Input'>
          <ng-template #template>
            <ejs-radiobutton label='Option 2' name='group1'></ejs-radiobutton>
          </ng-template>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

Tab Key Navigation

Enable Tab key navigation for toolbar items using the tabIndex property.

tabIndex Property

• tabIndex > 0 - Enables tab navigation in specified order
• tabIndex = 0 - Navigation based on element order
• tabIndex < 0 - Disables tab key navigation for item

Example: Enable Tab Navigation for Specific Items

<ejs-toolbar>
  <e-items>
    <e-item text='Item 1' tabIndex="1"></e-item>
    <e-item text='Item 2' tabIndex="2"></e-item>
    <e-item text='Item 3' tabIndex="3"></e-item>
  </e-items>
</ejs-toolbar>

Users can now switch between items using Tab (forward) and Shift+Tab (backward) keys.

Navigation Order

The tabIndex values determine the tab navigation order:

<e-item text='Third' tabIndex="3"></e-item>
<e-item text='First' tabIndex="1"></e-item>
<e-item text='Second' tabIndex="2"></e-item>

Tab navigation order: First → Second → Third (in tabIndex order, not document order)

Default Element Order

If all tabIndex values are 0, tab navigation follows document element order:

<e-item text='Item 1' tabIndex="0"></e-item>
<e-item text='Item 2' tabIndex="0"></e-item>
<e-item text='Item 3' tabIndex="0"></e-item>

Navigation order: Item 1 → Item 2 → Item 3

Mixed Item Types Example

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ToolbarModule, NumericTextBoxModule, DropDownListModule, CheckBoxModule],
  standalone: true,
  selector: 'app-container',
  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='Undo'></e-item>
        <e-item text='Redo'></e-item>
        
        <e-item type='Input' tabIndex="1">
          <ng-template #template>
            <ejs-numerictextbox format="c2" value="1" width="150"></ejs-numerictextbox>
          </ng-template>
        </e-item>
        
        <e-item type='Input' tabIndex="2">
          <ng-template #template>
            <ejs-dropdownlist [dataSource]='sportsList' width="120"></ejs-dropdownlist>
          </ng-template>
        </e-item>
        
        <e-item type='Input'>
          <ng-template #template>
            <ejs-checkbox label="Enable" [checked]="true"></ejs-checkbox>
          </ng-template>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  public sportsList: string[] = ['Badminton', 'Basketball', 'Cricket'];
}

Item Templates & Components

Table of Contents

• Template Property Overview
• String Template
• Query Selector Template
• Angular ng-template
• Component Embedding
• Menu Component Integration
• Multiple Components
• Template Best Practices

Template Property Overview

The template property enables custom rendering of toolbar items beyond standard buttons and separators. Templates support:

• HTML strings for simple structures
• Query selectors referencing DOM elements
• Angular ng-template directive for components
• Complex UI elements and interactions

Template Types

String Template

Define template content as an HTML string directly.

Simple String Template

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item text='Copy'></e-item>
        <e-item text='Paste'></e-item>
        <e-item type='Separator'></e-item>
        <e-item [template]="checkboxTemplate"></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  checkboxTemplate: string = "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>";
}

Checkbox Template String

checkboxTemplate: string = `
  <div class="toolbar-checkbox">
    <input type="checkbox" id="chk_accept" />
    <label for="chk_accept">Enable Feature</label>
  </div>
`;

Custom Button Template

customButtonTemplate: string = `
  <button class="e-btn e-outline">
    <span class="e-btn-icon">✓</span>
    Custom Action
  </button>
`;

Query Selector Template

Reference external HTML elements using query selectors.

Template with ID Selector

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <!-- External template definition -->
    <button id='Template' class='e-btn'>Template Button</button>

    <ejs-toolbar>
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item type='Separator'></e-item>
        <e-item text='Paste' prefixIcon='e-icons e-paste'></e-item>
        <e-item type='Separator'></e-item>
        <!-- Reference template by ID -->
        <e-item [template]="templateId"></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  templateId: string = '#Template';
}

Template Element Definition

template: `
  <div id='dropdown-template' class='e-toolbar-template'>
    <select id='languages'>
      <option>English</option>
      <option>Spanish</option>
      <option>French</option>
    </select>
  </div>

  <ejs-toolbar>
    <e-items>
      <e-item [template]="'#dropdown-template'"></e-item>
    </e-items>
  </ejs-toolbar>
`

Angular ng-template

Use Angular's ng-template directive with #template reference for component rendering.

Basic ng-template Example

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

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item text='Copy'></e-item>
        <e-item text='Paste'></e-item>
        <e-item type='Separator'></e-item>
        
        <!-- ng-template for custom content -->
        <e-item>
          <ng-template #template>
            <div class="custom-content">
              <span>Custom Template Content</span>
            </div>
          </ng-template>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

ng-template with Checkbox

<e-item>
  <ng-template #template>
    <div class="checkbox-wrapper">
      <input type="checkbox" id="accept" />
      <label for="accept">Terms and Conditions</label>
    </div>
  </ng-template>
</e-item>

ng-template with Input Control

<e-item>
  <ng-template #template>
    <input type="text" 
           class="search-input" 
           placeholder="Search..."
           (keyup)="onSearch($event)" />
  </ng-template>
</e-item>

Component Embedding

Embed Syncfusion and custom Angular components within toolbar items.

NumericTextBox Component

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

@Component({
  imports: [ToolbarModule, NumericTextBoxModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item text='Copy'></e-item>
        <e-item text='Paste'></e-item>
        
        <!-- NumericTextBox embedded -->
        <e-item type='Input'>
          <ng-template #template>
            <ejs-numerictextbox 
              placeholder="Enter amount"
              format="c2" 
              value="1" 
              width="150">
            </ejs-numerictextbox>
          </ng-template>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

DatePicker Component

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

@Component({
  imports: [ToolbarModule, DatePickerModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item>
          <ng-template #template>
            <ejs-datepicker 
              placeholder="Select date"
              width="150">
            </ejs-datepicker>
          </ng-template>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

Button Component

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

@Component({
  imports: [ToolbarModule, ButtonModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item>
          <ng-template #template>
            <button ejs-button 
                    cssClass="e-outline" 
                    iconCss="e-icons e-save"
                    (click)="onSave()">
              Save
            </button>
          </ng-template>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  onSave() {
    console.log('Save clicked');
  }
}

Menu Component Integration

Embed the Menu component within toolbar items.

Basic Menu in Toolbar

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

@Component({
  imports: [ToolbarModule, MenuModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item text='Copy'></e-item>
        <e-item text='Paste'></e-item>
        <e-item>
          <ng-template #template>
            <ejs-menu [items]="menuItems"></ejs-menu>
          </ng-template>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  menuItems = [
    { text: 'File' },
    { text: 'Edit' },
    { text: 'View' }
  ];
}

Menu with Nested Items

import { ToolbarModule, MenuItemModel, MenuModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';

@Component({
  imports: [ToolbarModule, MenuModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item>
          <ng-template #template>
            <ejs-menu [items]="data"></ejs-menu>
          </ng-template>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent {
  data: MenuItemModel[] = [
    {
      text: 'Home',
      items: [
        { text: 'Dashboard' },
        { text: 'Settings' }
      ]
    },
    {
      text: 'Products',
      items: [
        { text: 'Electronics' },
        { text: 'Clothing' }
      ]
    },
    {
      text: 'Services',
      items: [
        { text: 'Support' },
        { text: 'Contact' }
      ]
    }
  ];
}

Multiple Components

Combine multiple components in a single toolbar.

Mixed Components Example

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { FormsModule } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  imports: [ToolbarModule, NumericTextBoxModule, DatePickerModule, ButtonModule, FormsModule],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item text='Copy'></e-item>
        
        <!-- NumericTextBox -->
        <e-item>
          <ng-template #template>
            <ejs-numerictextbox 
              placeholder="Quantity"
              value="10" 
              width="100">
            </ejs-numerictextbox>
          </ng-template>
        </e-item>
        
        <!-- DatePicker -->
        <e-item>
          <ng-template #template>
            <ejs-datepicker 
              placeholder="Select date"
              width="120">
            </ejs-datepicker>
          </ng-template>
        </e-item>
        
        <!-- Button -->
        <e-item>
          <ng-template #template>
            <button ejs-button cssClass="e-small">Submit</button>
          </ng-template>
        </e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

Template Best Practices

1. Use Proper Template Reference

<!-- Correct -->
<e-item>
  <ng-template #template>
    <!-- Content -->
  </ng-template>
</e-item>

<!-- Incorrect - missing #template -->
<e-item>
  <ng-template>
    <!-- Won't render properly -->
  </ng-template>
</e-item>

2. Template Styling

.toolbar-template-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
}

.toolbar-template-item input {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
}

3. Template Event Handling

<e-item>
  <ng-template #template>
    <input type="text" 
           (keyup)="onKeyUp($event)"
           (blur)="onBlur($event)" />
  </ng-template>
</e-item>

4. Template with Data Binding

<e-item>
  <ng-template #template>
    <select [(ngModel)]="selectedValue" (change)="onSelectionChange()">
      <option *ngFor="let item of dataList" [value]="item">
        {{ item }}
      </option>
    </select>
  </ng-template>
</e-item>

5. Conditional Template Rendering

<e-item *ngIf="showSearchBox">
  <ng-template #template>
    <input type="search" 
           placeholder="Search..."
           [disabled]="!isSearchEnabled" />
  </ng-template>
</e-item>