How to use ngx-contextmenu - 10 common examples
To help you get started, we’ve selected a few ngx-contextmenu examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
isaacplmann / ngx-contextmenu / src / demo / app.module.ts View on Github 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { ContextMenuModule } from 'ngx-contextmenu';
import { AppComponent } from './app.component';
import { ChildOneComponent } from './child1.component';
import { ChildTwoComponent } from './child2.component';
@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent, ChildOneComponent, ChildTwoComponent],
imports: [
BrowserModule,
CommonModule,
ContextMenuModule.forRoot({
autoFocus: true,
// useBootstrap4: true,
}),
RouterModule.forRoot([
{
path: 'two',
component: ChildTwoComponent,
},
{
path: '**',
component: ChildOneComponent,
}
]),
ScrollDispatchModule,
],
providers: [/* TODO: Providers go here */],AngularFontAwesomeModule,
DataTablesModule,
NgSelectModule,
ReactiveFormsModule,
Select2Module,
ClipboardModule,
NgbModule,
NgxTypeaheadModule,
BrowserAnimationsModule, // required animations module
ToastrModule.forRoot({
timeOut:4000,
positionClass: 'toast-top-right',
preventDuplicates: true,
}),
NgxSpinnerModule,
ContextMenuModule.forRoot({
autoFocus: true
}),
ClickOutsideModule
],
providers: [SwitchidmaskPipe, AlertifyService, Title,AppAuthProvider],
bootstrap: [AppComponent],
entryComponents:[
OtpComponent,
ModalComponent,
ModalconfirmationComponent,
FlowReRouteModalComponent,
ChangepasswordComponent,
AffectedIslComponent,
FlowGraphComponent,
FlowPathGraphComponent,
FlowContractsComponent,imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
FormsModule,
ReactiveFormsModule,
NgSelectModule,
ChartModule,
ContextMenuModule.forRoot()
],
providers: [
BackendService,
ModalService,
MoneyToIntPipe,
IntToMoneyPipe,
// {provide: HIGHCHARTS_MODULES, useFactory: () => [ highstock, more, exporting ] }
],
entryComponents: [
ModalContainerComponent,
ConfirmContainerComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }export const angularticsSettings: Partial = {
developerMode: !environment.analytics,
pageTracking: {
clearIds: true,
idsRegExp: new RegExp('^[0-9a-z]{24}$'),
},
ga: {
anonymizeIp: true,
},
};
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ContextMenuModule.forRoot({useBootstrap4: true}),
AuthModule,
CoreModule,
CollectionModule,
SharedModule,
ViewModule,
WorkspaceModule,
AppRoutingModule, // needs to be declared after all other routing modules
Angulartics2Module.forRoot(angularticsSettings),
],
providers: [
{
provide: LOCALE_ID,
useFactory: () => environment.locale,
},
{
provide: TRANSLATIONS,},
{ path: 'release-note', component: ReleaseNoteComponent },
{ path: 'about', component: AboutPageComponent },
{ path: '', redirectTo: 'git', pathMatch: 'full' }
];
@NgModule({
declarations: [
AppComponent
],
imports: [
TagInputModule,
BrowserModule,
BrowserAnimationsModule,
NgbModule.forRoot(),
ContextMenuModule.forRoot(),
SimpleNotificationsModule.forRoot({
position: [
'top',
'right'
],
timeOut: 10000,
// showProgressBar: false,
icons: {
success: '<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20.7 5.3c-0.4-0.4-1-0.4-1.4 0l-10.3 10.3-4.3-4.3c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5 5c0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l11-11c0.4-0.4 0.4-1 0-1.4z"></path></svg>',
error: '<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M13.4 12l5.3-5.3c0.4-0.4 0.4-1 0-1.4s-1-0.4-1.4 0l-5.3 5.3-5.3-5.3c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l5.3-5.3 5.3 5.3c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4l-5.3-5.3z"></path></svg>',
alert: '<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 1c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11zM12 21c-5 0-9-4-9-9s4-9 9-9c5 0 9 4 9 9s-4 9-9 9z"></path><path d="M12 7c-0.6 0-1 0.4-1 1v4c0 0.6 0.4 1 1 1s1-0.4 1-1v-4c0-0.6-0.4-1-1-1z"></path><path d="M11.3 15.3c-0.2 0.2-0.3 0.4-0.3 0.7s0.1 0.5 0.3 0.7c0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.2-0.2 0.3-0.5 0.3-0.7s-0.1-0.5-0.3-0.7c-0.4-0.4-1-0.4-1.4 0z"></path></svg>',
info: '<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 1c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11zM12 21c-5 0-9-4-9-9s4-9 9-9c5 0 9 4 9 9s-4 9-9 9z"></path><path d="M12 11c-0.6 0-1 0.4-1 1v4c0 0.6 0.4 1 1 1s1-0.4 1-1v-4c0-0.6-0.4-1-1-1z"></path><path d="M11.3 7.3c-0.2 0.2-0.3 0.4-0.3 0.7s0.1 0.5 0.3 0.7c0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.2-0.2 0.3-0.4 0.3-0.7s-0.1-0.5-0.3-0.7c-0.4-0.4-1-0.4-1.4 0z"></path></svg>',
warn: '<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M23 17.5l-8.4-14.2c-0.4-0.7-1.1-1.2-1.9-1.4s-1.6-0.1-2.3 0.3c-0.4 0.2-0.8 0.6-1 1 0 0 0 0 0 0l-8.4 14.3c-0.8 1.4-0.3 3.3 1.1 4.1 0.4 0.3 0.9 0.4 1.4 0.4h17c0.8 0 1.6-0.3 2.1-0.9 0.6-0.6 0.9-1.3 0.9-2.1-0.1-0.5-0.2-1.1-0.5-1.5zM21.2 19.7c-0.2 0.2-0.5 0.3-0.7 0.3h-17c-0.2 0-0.3 0-0.5-0.1-0.5-0.3-0.6-0.9-0.4-1.4l8.5-14.1c0.1-0.1 0.2-0.3 0.3-0.3 0.5-0.3 1.1-0.1 1.4 0.3l8.5 14.1c0.1 0.1 0.1 0.3 0.1 0.5 0.1 0.3-0.1 0.5-0.2 0.7z"></path><path d="M12 8c-0.6 0-1 0.4-1 1v4c0 0.6 0.4 1 1 1s1-0.4 1-1v-4c0-0.6-0.4-1-1-1z"></path><path d="M11.3 16.3c-0.2 0.2-0.3 0.4-0.3 0.7s0.1 0.5 0.3 0.7c0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.2-0.2 0.3-0.5 0.3-0.7s-0.1-0.5-0.3-0.7c-0.4-0.4-1-0.4-1.4 0z"></path></svg>'
},
theClass: 'top-noti'
}),NgxResizableModule,
BrowserModule,
HttpClientModule,
FormsModule,
BrowserModule,
CdkTableModule,
AngularResizedEventModule,
HttpClientModule,
FormsModule,
BrowserModule,
HttpClientModule,
FormsModule,
DragDropModule,
PriDragDropModule,
AngularResizedEventModule,
ContextMenuModule.forRoot(),
HotkeyModule.forRoot({cheatSheetHotkey: "ctrl+h"}),
CustomFormsModule,
ReactiveFormsModule,
AutocompleteLibModule,
BrowserAnimationsModule, // required animations module
ToastrModule.forRoot(),
NgProgressModule
],
providers: [
{provide: 'GlobalRefSelector', useClass: environment.globalTypeSelector},
{provide: 'GlobalRefDesigner', useClass: EditorDesignerGlobal},
{provide: 'GlobalRefEditor', useClass: environment.globalTypeEditor},
{provide: 'subSystem', useValue: 'editor'}
],
bootstrap: [EditorComponent]
})IComponent,
RComponent,
TComponent,
InteractionComponent,
BoxOptionsComponent,
TreeNodeComponent,
SelectTypeComponent,
ScreenComponent,
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
DragDropModule,
AngularResizedEventModule,
ContextMenuModule.forRoot(),
HotkeyModule.forRoot({cheatSheetHotkey: "ctrl+h"}),
CustomFormsModule,
ReactiveFormsModule,
AutocompleteLibModule,
BrowserAnimationsModule, // required animations module
ToastrModule.forRoot()
],
providers: [
{provide: 'GlobalRefDesigner', useClass: environment.globalTypeDesigner},
{provide: 'subSystem', useValue: 'designer'}
],
bootstrap: [DesignerComponent]
})
export class DesignerModule { }imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
LoadingBarModule.forRoot(),
LoadingBarHttpClientModule,
LoadingBarRouterModule,
HotkeyModule,
ToastModule.forRoot(),
CollapseModule.forRoot(),
BsDatepickerModule.forRoot(),
BsDropdownModule.forRoot(),
ModalModule.forRoot(),
PaginationModule.forRoot(),
TabsModule.forRoot(),
ContextMenuModule.forRoot({
useBootstrap4: true,
autoFocus: true,
}),
CommentModule,
SharedModule,
PlayerModule,
ProgramsRoutingModule,
],
declarations: [
routedComponents,
ProgramPlayInfoComponent,
],
providers: [
ProgramsService,
],
})const SERVICES = [
DictionaryService,
FSService
];
@NgModule({
bootstrap: [RootPageComponent],
declarations: [
...COMPONENTS
],
imports: [
...MODULES,
ContextMenuModule.forRoot({
autoFocus: true
}),
NgxsModule.forRoot(states),
NgxsLoggerPluginModule.forRoot({
collapsed: false,
logger: console
}),
NgxsStoragePluginModule.forRoot({
key: ['fscolor', 'fslog', 'layout', 'prefs', 'views', 'window'],
storage: StorageOption.LocalStorage
}),
NgxsReduxDevtoolsPluginModule.forRoot({disabled: !window['DEV_MODE']})
],
providers: [
...SERVICESimport { FeaturesModule } from '../../../features/features.module';
const routes: Routes = [
{ path: '', component: ScheduleComponent }
];
@NgModule({
imports: [
SharedModule,
RouterModule.forChild(routes),
FeaturesModule,
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory
}),
ContextMenuModule.forRoot({
useBootstrap4: true
}),
],
declarations: [ScheduleComponent]
})
export class ScheduleModule {
}ngx-contextmenu
An Angular component to show a context menu on an arbitrary component
