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

Property	Type	Purpose	Example
`text`	string	Button display text	`text='Cut'`
`type`	string	Item type (Button, Separator, Input)	`type='Separator'`
`prefixIcon`	string	CSS class for icon before text	`prefixIcon='e-icons e-cut'`
`suffixIcon`	string	CSS class for icon after text	`suffixIcon='e-icons e-undo'`
`id`	string	Unique item identifier	`id='item1'`
`width`	string	Button width	`width='100px'`
`align`	string	Item alignment (Left, Center, Right)	`align='Right'`
`tooltipText`	string	Hover tooltip hint text	`tooltipText='Cut'`
`cssClass`	string	CSS classes to apply	`cssClass='custom-btn'`
`htmlAttributes`	object	Custom HTML attributes	`[htmlAttributes]='{class: "custom"}'`
`template`	string\|object	Custom template content	`[template]='templateVar'`
`tabIndex`	number	Tab key navigation order	`tabIndex=1`
`scrollStep`	number	Scroll distance in pixels	`scrollStep='50'`

Common Use Cases

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