How to get started easily with Syncfusion Angular 5 Toolbar?

2 mins read

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

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 5+
TypeScript 2.6+

Angular 5 Toolbar – Introduction

The Angular 5 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.

Dependencies

Before starting with this project, the Angular 5 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.

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

Now create a new Angular project by using the command `ng new` and navigate to that folder.
```
ng new <project name>
cd <project name>
```

Install the ej2-angular-navigations package through the npm install command.
```
npm install @syncfusion/ej2-angular-navigations --save
```

Adding Angular 5 Toolbar

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

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

[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';
 
@NgModule({
    imports: [
        BrowserModule, ToolbarModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

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

[app.component.html]

<ejs-toolbar>
  <div>
    <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>
  </div>
</ejs-toolbar>

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

[index.html]

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

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 5 Toolbar.

Did you find this information helpful?

Yes

Comments (0)