How to get started easily with Syncfusion Angular 11 Context Menu?
This article explains how to create a simple angular 11 Context Menu component. A quick start project that helps you to create an Angular 11 Context Menu with a minimal code configuration.
Prerequisites
Before start, we need following items to create Angular Context Menu in Angular 11 application
- Node.js (latest version)
- Angular 11
- Angular CLI
- Typescript 4+
- Visual Studio Code for Editor
Dependencies
The angular 11 Context Menu is created from the Syncfusion ej2-angular-navigations package from npmjs, which are distributed in npm as @syncfusion scoped packages.
Creating Angular Project
- Install Angular cli 11 using following command.
npm install -g @angular/cli@11.2.3
Note:
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 the corresponding angular version number.
npm install -g @angular/cli@<CLI VERSION>
- Create a new Angular 11 project using angular cli and navigate to that folder.
ng new angular11-app cd angular11-app
Adding Angular Context Menu
- After
running the Angular 11 application successfully, configure the Angular
Context Menu in this application. Install Angular Context Menu and EJ2
package using following command.
npm install @syncfusion/ej2-angular-navigations --save
The --save command will instruct the NPM to include a Context Menu package inside the dependencies section of the package.json.
- Import Context Menu from installed package.
- Import and inject the other required modules within the providers section of app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ContextMenuModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ContextMenuModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
- Add the given below angular context menu’s styles in styles.css.
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
/* Context Menu target */
#target {
border: 1px dashed;
height: 150px;
padding: 10px;
position: relative;
text - align: justify;
color: gray;
user - select: none;
}
- Add the angular Context Menu component in app.component.ts.
import { Component } from '@angular/core';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
@Component({
selector: 'app-root',
template`<div id="target">Right click / Touch hold to open the ContextMenu</div>
<ejs-contextmenu id='contextmenu' target='#target' [items]= 'menuItems'></ejs-contextmenu>`
})
export class AppComponent {
public menuItems: MenuItemModel[] = [
{
text: 'Cut'
},
{
text: 'Copy'
},
{
text: 'Paste'
}];
}
Now serve the application using following command.
ng serve
Once the files are compiled successfully, it will serve the site at localhost:4200
Screenshot:
Rendering Items with Separator
[app.component.ts]
import { Component } from '@angular/core';
import { MenuItemModel } from '@syncfusion/ej2-navigations;
@Component({
selector: 'app-root',
template`<div id="target">Right click / Touch hold to open the ContextMenu</div>
<ejs-contextmenu id='contextmenu' target='#target' [items]= 'menuItems'></ejs-contextmenu>`
})
export class AppComponent {
public menuItems: MenuItemModel[] = [
{
text: 'Cut'
},
{
text: 'Copy'
},
{
text: 'Paste'
},
{
separator: true
},
{
text: 'Font'
},
{
text: 'Paragraph'
}];
}
Screenshot:
Conclusion:
We hope you enjoyed learning about how to get started easily with Syncfusion Angular 11 Context Menu.
You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations. You can explore our Angular ContextMenu documentation to understand how to present and manipulate data and also refer our online samples for more features.
For current customers, you can check out our Angular 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 Angular Diagram and other Angular components. 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, BoldDesk Support, or feedback portal. We are always happy to assist you!
