https://github.com/bradenhc/ngux-contextmenu
A simple, customizable context menu built for Angular 6 applications
https://github.com/bradenhc/ngux-contextmenu
angular angular6 angular6-component angular6-library context-menu contextmenu contextmenu-component
Last synced: 20 days ago
JSON representation
A simple, customizable context menu built for Angular 6 applications
- Host: GitHub
- URL: https://github.com/bradenhc/ngux-contextmenu
- Owner: bradenhc
- License: mit
- Created: 2018-06-05T18:26:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-25T23:07:29.000Z (over 7 years ago)
- Last Synced: 2025-10-06T03:44:53.340Z (4 months ago)
- Topics: angular, angular6, angular6-component, angular6-library, context-menu, contextmenu, contextmenu-component
- Language: TypeScript
- Size: 189 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# NGUX Context Menu
A simple right-click context menu for Angular 6 applications with support for Font Awesome icons
via the
[`@fortawesome/angular-fontawesome`](https://www.npmjs.com/package/@fortawesome/angular-fontawesome)
module.
## Installation
This module has a dependency on `@fortawesome/angular-fontawesome`. Font Awesome provides several
beautiful and modern icons for free that are available to use to decorate the context menu
items. For now, this means that the dependency is required. The next release will remove this
required dependency and instead offer it as an option. Until then, please install the required
dependencies.
### Install using Yarn
```
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome
yarn add @ngux/contextmenu
```
## Usage
The simplest way to use the context menu is first to *import* the `ContextMenuModule` in your
component module:
```typescript
import { ContextMenuModule } from '@ngux/contextmenu';
@NgModule({
...
imports: [
...
ContextMenuModule
]
...
})
export class AppModule {}
```
And then to *include* the context menu and triggers in your HTML file:
```html
Right Click Me!!
```
You can also use the `nguxContextMenuTrigger` directive on multiple HTML elements to open a single
context menu definition from multiple triggers:
```html
Right Click Me!!
Right Click Me Too!!
Right Click Me Three!!
```
If you want to customize the action for the context menu depending on which trigger element you
clicked on, you can simply register a `(contextmenu)` event listener on the trigger to set the
selected element and then reference that element inside of the `(click)` event listeners.
```html
Right Click Me!!
Right Click Me!!
Right Click Me!!
```
There is plan for future support of a `[model]` property on the directive that will take care
of this for you, but it is currently not implemented.
### Scopes
The NGUX Context Menu simplifies defining context menus by using scopes to allow association between
context menus and their triggers. When a trigger with a set `[nguxScope]` property is right-clicked,
only the `ngux-contextmenu` element that has a matching scope will be opened. Two context menus
cannot have the same scope.
In the following example, right-clicking on the content between the `
` tags will open the context
menu, but right-clicking the content between the `` tags will not.
```html
Right Click Me!!
Right Click Me Too!!
```
### Context Menu Items
The context menu will only include `` tags in the final result of the
menu. These components have three properties:
- `[text]` - the text that will be displayed
- `[icon]` - a valid `@fortawesome/angular-fontawesome` icon
- `[alias]` - smaller text to display on the far right of the context menu item
A complete example demonstrating all the current features of the NGUX Context Menu is given
below:
**`app.module.ts`**
```typescript
import { ContextMenuModule } from '@ngux/contextmenu';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
...
imports: [
...
FontAwesomeModule,
ContextMenuModule
]
...
})
export class AppModule {}
```
**`app.component.ts`**
```typescript
import { Component } from '@angular/core';
import { faGlobe } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
faGlobe = faGlobe;
sayHello() {
console.log("Hello World!");
}
sayGoodbye() {
console.log("Goodbye!");
}
onButtonClick(): void {
console.log("Button clicked!");
}
}
```
**`app.component.html`**
```html
Right Click Me!!
Right Click Me!!
Right Click Me!!
```