How to get started easily with Syncfusion Angular 11 Toolbar?

A quick start project that helps you to create an Angular 11 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.

• Node.js (latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio code for editor

Angular 11 Toolbar – Introduction

The Angular 11 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 11 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@11.2.3

2. Now create a new Angular project by using the command `ng new` and navigate to that folder.

ng new angular11-app

cd angular11-app

3. Install the ej2-angular-navigations package through the npm install command.

npm install @syncfusion/ej2-angular-navigations --save

Adding Angular 11 Toolbar

You can add the Angular 11 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.

[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 { }

3. 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>

4. 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" />

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

Conclusion

I hope you enjoyed learning about how to get started with Angular 11 Toolbar.

You can refer to our Angular Toolbar feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications.  You can also explore our Angular Toolbar example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!