We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 7 Toolbar?

Platform: JavaScript - EJ 2 |
Control: Toolbar |
Published Date: May 14, 2019 |
Last Revised Date: May 15, 2019

A quick start project that helps you to create an Angular 7 Toolbar with minimal code configuration.


Angular 7 Toolbar with it's items

Project pre-requisites

Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project.

  • Angular 7+
  • TypeScript 2.6+


Angular 7 Toolbar – Introduction

The Angular 7 Toolbar used in this project is created from the Syncfusion `ej2-angular-toolbar` package. You can simply define it as <ejs-toolbar> within the template.



Before starting with this project, the Angular 7 Toolbar requires to add the Syncfusion `ej2-angular-navigations` package from npmjs, which are distributed in npm as @syncfusion scoped packages.


Creating Angular Project

We will see the Angular project creation steps using the Angular CLI tool.

  1. Install the Angular CLI application in your machine.
    npm install -g @angular/cli@7.0.5

Angular CLI application Installation by using command prompt


If you would like to follow and run the application in Angular 6 or Angular 5 or Angular 4, you need to replace the CLI command version number with corresponding angular version number.

npm install -g @angular/cli@<CLI VERSION>


  1. Now create a new Angular project by using the command `ng new` and navigate to that folder.
    ng new <project name>
    cd <project name>
  1. Install the ej2-angular-navigations package through the npm install command.
    npm install @syncfusion/ej2-angular-navigations --save

Adding Angular 7 Toolbar

You can add the Angular 7 Toolbar component by using `ejs-toolbar` directive and the attributes used within this tag allows you to define other toolbar functionalities.

  1. Import the ToolbarModule into app.module.ts file from the ej2-angular-navigations package.
  2. The next step in Angular Toolbar creation is to import and inject the other required modules within the providers section of app.module.ts.



import { BrowserModule } from '@angular/platform-browser';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
    imports: [
        BrowserModule, ToolbarModule
    providers: [],
    bootstrap: [AppComponent]
export class AppModule { }


  1. Define the Angular Toolbar code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file.



    <div><button class='e-btn e-tbar-btn'>Cut</button> </div>
    <div><button class='e-btn e-tbar-btn'>Copy</button> </div>
    <div><button class='e-btn e-tbar-btn'>Paste</button> </div>
    <div class='e-separator'> </div>
    <div><button class='e-btn e-tbar-btn'>Bold</button> </div>
    <div><button class='e-btn e-tbar-btn'>Italic</button> </div>


  1. Refer the CDN link of CSS reference within the index.html file.



<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />


  1. Try running the application with the command ng serve, and see the Toolbar with it’s item displayed on the browser.

There are more options to explore with Angular 7 Toolbar.

You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon