### File

`src/dialog/overflow-menu/overflow-menu-pane.component.ts`

### Description

Extend the `Dialog` component to create an overflow menu.

Not used directly. See overflow-menu.component and overflow-menu.directive for more

### Extends

`Dialog`

### Implements

`AfterViewInit`

### Metadata

selector | `ibm-overflow-menu-pane`

template

    <ul
    	[attr.aria-label]="dialogConfig.menuLabel"
    	[ngClass]="{'bx--overflow-menu--flip': dialogConfig.flip}"
    	role="menu"
    	#dialog
    	class="bx--overflow-menu-options bx--overflow-menu-options--open"
    	role="menu"
    	(click)="doClose()"
    	[attr.aria-label]="dialogConfig.menuLabel">
    	<ng-template
    		[ngTemplateOutlet]="dialogConfig.content"
    		[ngTemplateOutletContext]="{overflowMenu: this}">
    	</ng-template>
    </ul>

### Index

###### Properties

- Protected addGap
- Public data
- dialog
- Public placement
- Protected placements
- Protected Static resizeObservable
- Protected resizeSubscription
- Protected scrollSubscription

###### Methods

- afterDialogViewInit
- Protected listItems
- onDialogInit
- afterDialogViewInit
- Public doClose
- ngAfterViewInit
- ngOnDestroy
- ngOnInit
- onDialogInit
- placeDialog

###### Inputs

- dialogConfig

###### Outputs

- close

###### HostListeners

- keydown
- document:click
- keydown

### Constructor

`constructor(elementRef: ElementRef, i18n: I18n, experimental: ExperimentalService)`
Defined in src/dialog/overflow-menu/overflow-menu-pane.component.ts:32

Parameters :

Name | Type | Optional
elementRef | `ElementRef` | No
i18n | `I18n` | No
experimental | `ExperimentalService` | No

### Inputs

`dialogConfig` | Receives `DialogConfig` interface object with properties of `Dialog` explicitly defined. Type : `DialogConfig`
Inherited from `Dialog`
Defined in Dialog:47

### Outputs

`close` | Emits event that handles the closing of a `Dialog` object. `$event` Type: `EventEmitter<any>`
Inherited from `Dialog`
Defined in Dialog:42

### HostListeners

keydown
Arguments : `'$event'`
`keydown(event: KeyboardEvent)`
Defined in src/dialog/overflow-menu/overflow-menu-pane.component.ts:63

document:click
Arguments : `'$event'`
`document:click(event)`
Inherited from `Dialog`
Defined in Dialog:227
Sets up a event Listener to close `Dialog` if click event occurs outside `Dialog` object.

keydown
Arguments : `'$event'`
`keydown(event: KeyboardEvent)`
Inherited from `Dialog`
Defined in Dialog:206
Sets up a KeyboardEvent to close `Dialog` with Escape key.

### Methods

afterDialogViewInit
`afterDialogViewInit()`
Defined in src/dialog/overflow-menu/overflow-menu-pane.component.ts:109
Returns : `void`

Protected listItems
`listItems()`
Defined in src/dialog/overflow-menu/overflow-menu-pane.component.ts:121
Returns : `any`

onDialogInit
`onDialogInit()`
Defined in src/dialog/overflow-menu/overflow-menu-pane.component.ts:37
Returns : `void`

afterDialogViewInit
`afterDialogViewInit()`
Inherited from `Dialog`
Defined in Dialog:164
Empty method to be overridden by consuming classes to run any additional initialization code after the view is available. NOTE: this does not guarantee the dialog will be positioned, simply that it will exist in the DOM Returns : `void`

Public doClose
`doClose()`
Inherited from `Dialog`
Defined in Dialog:237
Closes `Dialog` object by emitting the close event upwards to parents. Returns : `void`

ngAfterViewInit
`ngAfterViewInit()`
Inherited from `Dialog`
Defined in Dialog:116
After the DOM is ready, focus is set and dialog is placed in respect to the parent element. Returns : `void`

ngOnDestroy
`ngOnDestroy()`
Inherited from `Dialog`
Defined in Dialog:244
At destruction of component, `Dialog` unsubscribes from handling window resizing changes. Returns : `void`

ngOnInit
`ngOnInit()`
Inherited from `Dialog`
Defined in Dialog:100
Initialize the `Dialog`, set the placement and gap, and add a `Subscription` to resize events. Returns : `void`

onDialogInit
`onDialogInit()`
Inherited from `Dialog`
Defined in Dialog:158
Empty method to be overridden by consuming classes to run any additional initialization code. Returns : `void`

placeDialog
`placeDialog()`
Inherited from `Dialog`
Defined in Dialog:169
Uses the position service to position the `Dialog` in screen space Returns : `void`

### Properties

Protected addGap
`addGap: `object``
Type : `object`

Default value : `{ "left": pos => position.addOffset(pos, 0, -this.dialogConfig.gap), "right": pos => position.addOffset(pos, 0, this.dialogConfig.gap), "top": pos => position.addOffset(pos, -this.dialogConfig.gap), "bottom": pos => position.addOffset(pos, this.dialogConfig.gap), "left-bottom": pos => position.addOffset(pos, 0, -this.dialogConfig.gap), "right-bottom": pos => position.addOffset(pos, 0, this.dialogConfig.gap) }`

Inherited from `Dialog`
Defined in Dialog:77
Handles offsetting the `Dialog` item based on the defined position to not obscure the content beneath.

Public data
`data: `object``
Type : `object`
Default value : `{}`
Inherited from `Dialog`
Defined in Dialog:56
Stores the data received from `dialogConfig`.

dialog
`dialog: `ElementRef``
Type : `ElementRef`
Decorators : `@ViewChild('dialog')`
Inherited from `Dialog`
Defined in Dialog:51
Maintains a reference to the view DOM element of the `Dialog`.

Public placement
`placement: `string``
Type : `string`
Inherited from `Dialog`
Defined in Dialog:61
The placement of the `Dialog` is received from the `Position` service.

Protected placements
`placements: `Positions``
Type : `Positions`
Default value : `{}`
Inherited from `Dialog`
Defined in Dialog:89
Extra placements. Child classes can add to this for use in `placeDialog`.

Protected Static resizeObservable
`resizeObservable: `Observable<any>``
Type : `Observable<any>`
Default value : `fromEvent(window, "resize").pipe(throttleTime(100))`
Inherited from `Dialog`
Defined in Dialog:38
One static event observable to handle window resizing.

Protected resizeSubscription
`resizeSubscription: `Subscription``
Type : `Subscription`
Inherited from `Dialog`
Defined in Dialog:66
`Subscription` used to update placement in the event of a window resize.

Protected scrollSubscription
`scrollSubscription: `Subscription``
Type : `Subscription`
Default value : `new Subscription()`
Inherited from `Dialog`
Defined in Dialog:72
Subscription to all the scrollable parents `scroll` event

    import { Component, HostListener, ElementRef, AfterViewInit } from "@angular/core";
    import { Dialog } from "../dialog.component";
    import { position } from "@carbon/utils-position";
    import { isFocusInLastItem, isFocusInFirstItem } from "./../../common/tab.service";
    import { I18n } from "./../../i18n/i18n.module";
    import { ExperimentalService } from "./../../experimental.module";

    /**
     * Extend the `Dialog` component to create an overflow menu.
     *
     * Not used directly. See overflow-menu.component and overflow-menu.directive for more
     */
    @Component({
    	selector: "ibm-overflow-menu-pane",
    	template: `
    		<ul
    			[attr.aria-label]="dialogConfig.menuLabel"
    			[ngClass]="{'bx--overflow-menu--flip': dialogConfig.flip}"
    			role="menu"
    			#dialog
    			class="bx--overflow-menu-options bx--overflow-menu-options--open"
    			role="menu"
    			(click)="doClose()"
    			[attr.aria-label]="dialogConfig.menuLabel">
    			<ng-template
    				[ngTemplateOutlet]="dialogConfig.content"
    				[ngTemplateOutletContext]="{overflowMenu: this}">
    			</ng-template>
    		</ul>
    	`
    })
    export class OverflowMenuPane extends Dialog implements AfterViewInit {
    	constructor(protected elementRef: ElementRef, protected i18n: I18n, protected experimental: ExperimentalService) {
    		super(elementRef);
    	}

    	onDialogInit() {
    		this.addGap["bottom"] = pos => {
    			let offset;
    			if (this.experimental.isExperimental) {
    				/*
    				* 16 is half the width of the overflow menu trigger element.
    				* we also move the element by half of it's own width, since
    				* position service will try and center everything
    				*/
    				offset = Math.round(this.dialog.nativeElement.offsetWidth / 2) - 16;
    			} else {
    				// 60 shifts the menu right to align the arrow.
    				offset = 60;
    			}
    			if (this.dialogConfig.flip) {
    				return position.addOffset(pos, 0, -offset);
    			}
    			return position.addOffset(pos, 0, offset);
    		};

    		if (!this.dialogConfig.menuLabel) {
    			this.dialogConfig.menuLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;
    		}
    	}

    	@HostListener("keydown", ["$event"])
    	hostkeys(event: KeyboardEvent) {
    		const listItems = this.listItems();

    		switch (event.key) {
    			case "Down": // IE specific value
    			case "ArrowDown":
    				event.preventDefault();
    				if (!isFocusInLastItem(event, listItems))  {
    					const index = listItems.findIndex(item => item === event.target);
    					listItems[index + 1].focus();
    				} else {
    					listItems[0].focus();
    				}
    				break;

    			case "Up": // IE specific value
    			case "ArrowUp":
    				event.preventDefault();
    				if (!isFocusInFirstItem(event, listItems))  {
    					const index = listItems.findIndex(item => item === event.target);
    					listItems[index - 1].focus();
    				} else {
    					listItems[listItems.length - 1].focus();
    				}
    				break;

    			case "Home":
    				event.preventDefault();
    				listItems[0].focus();
    				break;

    			case "End":
    				event.preventDefault();
    				listItems[listItems.length - 1].focus();
    				break;

    			case "Esc": // IE specific value
    			case "Escape":
    			case "Tab":
    				event.stopImmediatePropagation();
    				this.doClose();
    				break;
    			default: break;
    		}
    	}

    	afterDialogViewInit() {
    		const focusElementList = this.listItems();
    		focusElementList.forEach(button => {
    			// Allows user to set tabindex to 0.
    			if (button.getAttribute("tabindex") === null) {
    				button.tabIndex = -1;
    			}
    		});
    		focusElementList[0].tabIndex = 0;
    		focusElementList[0].focus();
    	}

    	protected listItems() {
    		const selector = ".bx--overflow-menu-options__option:not([disabled]) .bx--overflow-menu-options__btn";
    		return Array.from<HTMLElement>(this.elementRef.nativeElement.querySelectorAll(selector));
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""