Item configuration in Angular Toolbar component

22 Sep 202514 minutes to read

The Toolbar renders by defining an array of items. Items can be constructed with the following built-in item types or custom templates.

Button

Button is the default item type, and renders using the text property.
Properties of the button item type:

Property Description
text The text to be displayed for the button.
id The ID of the button to be rendered. If the ID is not provided, an auto ID is generated.
prefixIcon Defines the class used to specify an icon for the button. The icon is positioned before the text if text is available, or the icon alone renders as a button.
suffixIcon Defines the class used to specify an icon for the button. The icon is positioned after the text if text is available. If both prefixIcon and suffixIcon are specified, only prefixIcon is considered.
width Sets the width of the button.
align Specifies the location for aligning Toolbar items.

Separator

The Separator type adds a vertical separation between the Toolbar’s single or multiple commands.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
import { TooltipModule } from '@syncfusion/ej2-angular-popups'



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

@Component({
imports: [
         ToolbarModule, TooltipModule
    ],


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='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>
        `
})

export class AppComponent {

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

If Separator is added as first or last item, it is not visible.

Input

The Input type is only applicable for adding template elements when the template property is defined as an object.
Input type creates an input element internally that acts as the container for Syncfusion input based components.

Note: Set toolbar item type property value as Input only for Input components.

NumericTextBox

  • The NumericTextBox component can be included by importing the NumericTextBox module from ej2-inputs.

  • Initialize the NumericTextBox in template property, where the Toolbar item type is set as Input.

  • Related NumericTextBox component properties can also be configured as shown below.

new NumericTextBox( { format: 'c2' })

  • The DropDownList component can be included by importing the DropDownList module from ej2-dropdowns.

  • Initialize the DropDownList in template property, where the Toolbar item type is set as Input.

  • Related DropDownList component properties can also be configured as shown below.

new DropDownList({ width: 100 })

CheckBox

  • The CheckBox component can be included by importing the CheckBox module from ej2-buttons.

  • Initialize the CheckBox in template property, where the Toolbar item type is set as Input.

  • Related CheckBox component properties can also be configured as shown below.

new CheckBox({ label: 'Checkbox', checked: true })

RadioButton

  • The RadioButton component can be included by importing the RadioButton module from ej2-buttons.

  • Initialize the RadioButton in template property, where the Toolbar item type is set as Input.

  • Related RadioButton component properties can also be configured as shown below.

new RadioButton({ label: 'Radio', name: 'default', checked: true })

The above steps apply to all Syncfusion input based components.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
import { TooltipModule } from '@syncfusion/ej2-angular-popups'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';
import { NumericTextBox} from '@syncfusion/ej2-inputs';
import { DropDownList} from '@syncfusion/ej2-dropdowns';
import { CheckBox, RadioButton  } from '@syncfusion/ej2-buttons';

@Component({
imports: [
         ToolbarModule, TooltipModule, NumericTextBoxModule, RadioButtonModule, CheckBoxModule, DropDownListModule
    ],


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'>
              <ng-template #template>
                <ejs-numerictextbox  format="c2" value="1" width="150"></ejs-numerictextbox>
              </ng-template>
             </e-item>
             <e-item type='Input'>
              <ng-template #template>
                <ejs-dropdownlist [dataSource]='this.data' width="120" index="2"></ejs-dropdownlist>
              </ng-template>
             </e-item>
             <e-item type='Input'>
              <ng-template #template>
                <ejs-checkbox label="CheckBox: true" [checked]="true"></ejs-checkbox>
              </ng-template>
             </e-item>
             <e-item type='Input'>
              <ng-template #template>
                <ejs-radiobutton label='Radio' name='default' checked="true"></ejs-radiobutton>
              </ng-template>
             </e-item>
          </e-items>
        </ejs-toolbar>
        `
})

export class AppComponent {
    @ViewChild('element') element?: any;
    public data: string[] = ['Badminton', 'Basketball', 'Cricket', 'Golf', 'Hockey', 'Rugby'];
   
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enabling tab key navigation in Toolbar

The tabIndex property of a Toolbar item enables tab key navigation for the item. By default, users can switch between items using the arrow keys, but the tabIndex property allows switching between items using the Tab and Shift+Tab keys as well.

To use the tabIndex property, set it for each Toolbar item that requires tab key navigation. The tabIndex property should be set to a positive integer value. A value of 0 or a negative value will disable tab key navigation for the item.

For example, to enable tab key navigation for two Toolbar items:

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

@Component({
    selector: 'app-container',
    template: `
        <ejs-toolbar>
          <e-items>
             <e-item text='item1' tabIndex=1></e-item>
             <e-item text='item2' tabIndex=2></e-item>
          </e-items>
        </ejs-toolbar>
        `
})

export class AppComponent {

}

With the above code, users can switch between the two Toolbar items using the Tab and Shift+Tab keys, in addition to using the arrow keys. The items will be navigated in the order specified by the tabIndex values.

If you set the tabIndex value to 0 for all Toolbar items, tab key navigation will be based on the element order rather than the tabIndex values:

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

@Component({
    selector: 'app-container',
    template: `
        <ejs-toolbar>
          <e-items>
             <e-item text='item1' tabIndex=0></e-item>
             <e-item text='item2' tabIndex=0></e-item>
          </e-items>
        </ejs-toolbar>
        `
})

export class AppComponent {

}

In this case, users can switch between the two Toolbar items using the Tab and Shift+Tab keys, and the items will be navigated in the order in which they appear in the DOM.

Example:

Here is an example of how to use the tabIndex property to enable tab key navigation for a Toolbar component:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
import { TooltipModule } from '@syncfusion/ej2-angular-popups'



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

@Component({
imports: [
         ToolbarModule, TooltipModule
    ],


standalone: true,
    selector: 'app-container',
    template: `
        <ejs-toolbar>
          <e-items>
             <e-item text='Cut' tabIndex=0></e-item>
             <e-item text='Copy' tabIndex=0></e-item>
             <e-item type='Separator'></e-item>
             <e-item text='Paste' tabIndex=0></e-item>
             <e-item type='Separator'></e-item>
             <e-item text='Undo' tabIndex=0></e-item>
             <e-item text='Redo' tabIndex=0></e-item>
          </e-items>
        </ejs-toolbar>
        `
})

export class AppComponent {

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

With the above code, users can switch between the Toolbar items using the Tab and Shift+Tab keys, and the items will be navigated based on the element order.

See Also