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