Context Menu Service for Angular
7 |Right click to see menu
9 |{{ message }}
22 | `, 23 | }) 24 | 25 | export class SimpleComponent { 26 | menu = SimpleMenuComponent; 27 | animatedMenu = AnimatedMenuComponent; 28 | messages: string[] = []; 29 | 30 | handleClose(msg: string) { 31 | this.messages.unshift(msg); 32 | this.messages.splice(10, this.messages.length); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/app/submenu/submenu-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | animate, 3 | state, 4 | style, 5 | transition, 6 | trigger, 7 | } from '@angular/animations'; 8 | import { Component } from '@angular/core'; 9 | 10 | import { ContextMenuService } from '../../lib/context-menu.service'; 11 | import { MenuPackage } from '../../lib/context-menu-injector'; 12 | import { MenuComponent } from '../../lib/menu.component'; 13 | import { SubSubmenuMenuComponent } from './subsubmenu-menu.component'; 14 | 15 | @Component({ 16 | selector: 'animated-menu', 17 | template: ` 18 | 39 | `, 40 | animations: [ 41 | trigger('menu', [ 42 | state('enter', style({ opacity: 1 })), 43 | state('exit, void', style({ opacity: 0 })), 44 | transition('* => *', animate(100)), 45 | ]), 46 | ], 47 | }) 48 | export class SubmenuMenuComponent extends MenuComponent { 49 | submenu = SubSubmenuMenuComponent; 50 | constructor( 51 | public menuPackage: MenuPackage, 52 | public contextMenuService: ContextMenuService, 53 | ) { 54 | super(menuPackage, contextMenuService); 55 | } 56 | 57 | handleClick(msg: string) { 58 | // tell the menu to close 59 | this.contextMenuService.closeAll(msg); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/app/submenu/submenu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { SubmenuMenuComponent } from './submenu-menu.component'; 4 | 5 | @Component({ 6 | selector: 'simple-component', 7 | template: ` 8 |{{ message }}
18 | `, 19 | }) 20 | export class SubmenuComponent { 21 | menu = SubmenuMenuComponent; 22 | messages: string[] = []; 23 | 24 | handleClose(msg: string) { 25 | this.messages.unshift(msg); 26 | this.messages.splice(10, this.messages.length); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/app/submenu/subsubmenu-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | animate, 3 | state, 4 | style, 5 | transition, 6 | trigger, 7 | } from '@angular/animations'; 8 | import { Component } from '@angular/core'; 9 | 10 | import { ContextMenuService } from '../../lib/context-menu.service'; 11 | import { MenuPackage } from '../../lib/context-menu-injector'; 12 | import { MenuComponent } from '../../lib/menu.component'; 13 | 14 | @Component({ 15 | selector: 'animated-menu', 16 | template: ` 17 | 30 | `, 31 | animations: [ 32 | trigger('menu', [ 33 | state('enter', style({ opacity: 1 })), 34 | state('exit, void', style({ opacity: 0 })), 35 | transition('* => *', animate(100)), 36 | ]), 37 | ], 38 | }) 39 | export class SubSubmenuMenuComponent extends MenuComponent { 40 | constructor( 41 | public menuPackage: MenuPackage, 42 | public contextMenuService: ContextMenuService, 43 | ) { 44 | super(menuPackage, contextMenuService); 45 | } 46 | 47 | handleClick(action: string) { 48 | // tell the menu to close 49 | this.contextMenuService.closeAll(action); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scttcper/ngx-rightclick/ed9e2d647730c8f84476b710499f924a9fae79c1/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * In development mode, to ignore zone related error stack frames such as 11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 12 | * import the following file, but please comment it out in production mode 13 | * because it will have performance impact when throw error 14 | */ 15 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 16 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scttcper/ngx-rightclick/ed9e2d647730c8f84476b710499f924a9fae79c1/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |