Context menu

The bsContextMenu structural directive on an <ng-template> inside an element replaces the browser's context menu on that element. A right-click opens the template at the pointer, rendered at the end of <body>; Shift+F10 and the ContextMenu key open it at the element. The template is usually a <bs-dropdown-menu>. Escape, a click elsewhere, scrolling or choosing an item closes it, and focus returns.

Basic usage

Chosen: nothing yet

  
    
      
        <div class="target-area" tabindex="0">
        
    
      
          Right-click me
        
    
      
          <ng-container *bsContextMenu>
        
    
      
            <bs-dropdown-menu (itemSelect)="chosen.set($event.value)">
        
    
      
              <bs-dropdown-item [value]="'cut'">Cut</bs-dropdown-item>
        
    
      
              <bs-dropdown-item [value]="'copy'">Copy</bs-dropdown-item>
        
    
      
              <bs-dropdown-item [value]="'paste'">Paste</bs-dropdown-item>
        
    
      
            </bs-dropdown-menu>
        
    
      
          </ng-container>
        
    
      
        </div>

  
    
      
        import { Component, signal } from '@angular/core';
        
    
      
        import { BsContextMenuDirective } from '@mintplayer/ng-bootstrap/context-menu';
        
    
      
        import { BsDropdownMenuComponent, BsDropdownItemComponent } from '@mintplayer/ng-bootstrap/dropdown';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-context-menu-demo',
        
    
      
          templateUrl: './my-context-menu-demo.component.html',
        
    
      
          imports: [BsContextMenuDirective, BsDropdownMenuComponent, BsDropdownItemComponent],
        
    
      
        })
        
    
      
        export class MyContextMenuDemoComponent {
        
    
      
          protected readonly chosen = signal<unknown>(null);
        
    
      
        }