LIDOR SYSTEMS

Advanced User Interface Controls and Components

Disable a Menu Item in Angular Context Menu

Created: 23 January 2018

In general, items in Context Menu are all enabled. In some cases, you may require to disable a specific menu item, depending on some condition. In this article, you will learn how to disable items in IntegralUI ContentMenu for Angular.

ContextMenu component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

To open the context menu, , right-click over the block element. At first, you will see that Paste menu option is disabled. By selecting the Cut or Copy option, the current label of block element is saved. Now when you open the menu, the Paste option is enabled.

If you select the Edit menu option, a text editor will popup where you can enter a new label for the block element.

How to Disable a ContextMenu Item

The enabled field of the item object determines whether the menu item is enabled or disabled. By default this field is omitted, which means the item is enabled. When menu structure is created for the first time, you can initially set some items to appear as disabled by setting the enabled field value to false.

@ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;

public menuSettings: any = {
    appRef: null,
    items: []
}

// Editing
public blockText: string = 'Right click to open the context menu';
public copyText: string = '';
public editText: string = '';
private isEditActive: boolean = false;
private originalText: string = '';

ngAfterViewInit(){
    this.menuSettings = {
        appRef: this.applicationRef,
        items: [
            { id: 1, text: "Edit" },
            { id: 2, type: "separator" },
            { id: 3, text: "Cut" },
            { id: 4, text: "Copy" },
            { id: 5, text: "Paste", enabled: false }
        ]
    }
}
                            
<div #application class="cmnu-disitm-block" [iuiContextMenu]="menuSettings" (menuClick)="menuItemClick($event)" (menuOpening)="onMenuOpening($event)">
    <span *ngIf="!isEditActive">{{blockText}}</span>
    <input *ngIf="isEditActive" type="text" [(ngModel)]="editText" (keydown)="editorKeyDown($event)" [iuiFocus]="isEditActive" (focus)="selectContent($event)" (blur)="editorLostFocus()" />
</div>
                            
.cmnu-disitm-block
{
    background: white;
    border: thin solid gray;
    width: 800px;
    height: 300px;
}
.cmnu-disitm-block span
{
    color: #808080;
    cursor: default;
    display: block;
    margin: 140px auto;
    text-align: center;
}
.cmnu-disitm-block input
{
    border: 0;
    font-size: 1.2em;
    margin: 137px 0;
    text-align: center;
    width: 100%;
}
.cmnu-disitm-block input:focus
{
    outline: none;
}                            

In above code, the Paste menu item is disabled, and it cannot select it when context menu appears.

Disable Item Before Menu is Opened

In cases when you don't know whether a menu item should be enabled or disabled initially, you can change it during run-time. For this purpose, you can handle the menuOpening event, where you can set a condition that will determine whether the menu item is disabled or not.

menuItemClick(e: any){
    if (e.item){
        // Action depends on selected menu option
        switch (e.item.id){
            case 1: // Edit
                this.showEditor();
                break;

            case 3: // Cut
                this.copyText = this.blockText;
                this.blockText = '';
                break;

            case 4: // Copy
                this.copyText = this.blockText;
                break;

            case 5:  // Paste
                this.blockText = this.copyText;
                this.copyText = '';
                break;
        }
   }
}

onMenuOpening(e: any){
   this.menuSettings.items[4].enabled = this.copyText != '' ? true : false; 
}                            
<div #application class="cmnu-disitm-block" [iuiContextMenu]="menuSettings" (menuClick)="menuItemClick($event)" (menuOpening)="onMenuOpening($event)">
    <span *ngIf="!isEditActive">{{blockText}}</span>
    <input *ngIf="isEditActive" type="text" [(ngModel)]="editText" (keydown)="editorKeyDown($event)" [iuiFocus]="isEditActive" (focus)="selectContent($event)" (blur)="editorLostFocus()" />
</div>
                            

From above code, the Paste menu item is disabled when the variable that stores the label of block element is empty. Now, just before menu appears, this condition is processed and the menu items are updated accordingly.

Note Handling this event allows you to change the Context Menu in many ways, like: how it appears, adding new items or replacing the menu with a very different one.

Conclusion

Disabling a menu item in Context Menu component for Angular is simple. You can disable it initiallty from code, or during run-time based on custom condition. When menu item is disabled, it will appear grayed and non-selectable.

The ContextMenu component is part of IntegralUI Web.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.