Getting started with JavaScript Toolbar control

08 May 2023 / 3 minutes to read

This section explains how to create a simple Toolbar using TypeScript, and how to configure ToolBar items like button, separator, and input components using Essential JS 2 quickstart seed repository.

Dependencies

The following list of dependencies are required to use the Toolbar component in your application.

|-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-popups

Installation and configuration

Clone the Essential JS 2 quickstart application project from GitHub, and install necessary npm packages using the following command line scripts.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

By default, the project is configured with all the EJ2 dependencies. For better understanding, remove all the dependencies from src/system.config.js to get started with the Toolbar component.

Refer to the Toolbar component dependencies in system.config.js configuration file.

[src/system.config.js]

System.config({
paths: {
    'syncfusion:': './node_modules/@syncfusion/',
},
map: {
    app: 'app',

    //Syncfusion packages mapping
    "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
    "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
    "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
    "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
    "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
    "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
    "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
    "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
},
packages: {
    'app': { main: 'app', defaultExtension: 'js' }
}
});

System.import('app');

The Toolbar CSS files are available in the ej2-navigations package folder. This can be referenced in your application using the following code.

[src/styles/styles.css]

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

The Toolbar can be rendered by defining an array of items. An item is rendered with text by defining the default item type as a Button. For more information about item configuration, refer to the Item Configuration section.

Add the HTML div tag with its ID attribute set to element in your index.html file where you will initialize the Toolbar.

[src/index.html]

<!DOCTYPE html>
<html lang="en">

<head>
<title>Essential JS 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!--style reference from app-->
<link href="/styles/styles.css" rel="stylesheet" />

<!--system js reference and configuration-->
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="system.config.js" type="text/javascript"></script>
</head>

<body>
<div style="margin: 50px;">
    <!--element which is going to render-->
    <div id="element"></div>
</div>

</body>

</html>

Import the Toolbar component to your app.ts file, and initialize it to the element #element as shown below.

[src/app/app.ts]

import { Toolbar } from '@syncfusion/ej2-navigations';

// Initialize Toolbar component
let toolbarObj: Toolbar = new Toolbar( {
items: [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' },
{ type: 'Separator'},
{ text: 'Bold' },
{ text: 'Italic' },
{ text: 'Underline' },
]
});

// Render initialized Toolbar
toolbarObj.appendTo('#element');

Now, run the application in the browser using the following command.

npm start

Output will look like this:

Source

Preview

app.ts

index.ts

index.html

import {Toolbar} from '@syncfusion/ej2-navigations';
let toolbar: Toolbar = new Toolbar({
items: [
  { text: 'Cut' },
  { text: 'Copy' },
  { text: 'Paste' },
  { type: 'Separator'},
  { text: 'Bold' },
  { text: 'Italic' },
  { text: 'Underline' },
]
});
toolbar.appendTo('#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Toolbar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet" />
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id='element'></div>
        <br/><br/>
        <div id='result'></div>
    </div>
</body>

</html>

In the above sample code, #element is the id of the HTML element in a page where the Toolbar is initialized.

Getting started with JavaScript Toolbar control

Dependencies

Installation and configuration

Initialize the Toolbar with commands

See Also