### File

`src/dialog/overflow-menu/overflow-menu.directive.ts`

### Description

Directive for extending `Dialog` to create overflow menus.

class: OverflowMenuDirective (extends DialogDirective)

selector: `ibmOverflowMenu`

     * <div [ibmOverflowMenu]="templateRef"></div>
     * <ng-template #templateRef>
     *     <!-- overflow menu options here -->
     * </ng-template>
     *

### Metadata

Providers | `DialogService`
Selector | `[ibmOverflowMenu]`

### Index

###### Methods
onDialogChanges onDialogInit updateConfig
###### Inputs
flip ibmOverflowMenu
###### HostListeners
keydown

### Constructor

`constructor(elementRef: ElementRef, viewContainerRef: ViewContainerRef, dialogService: DialogService)`
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:45
Creates an instance of `OverflowMenuDirective`. Parameters :
Name | Type | Optional
elementRef | `ElementRef` | No
viewContainerRef | `ViewContainerRef` | No
dialogService | `DialogService` | No

### Inputs

`flip` | Controls wether the overflow menu is flipped Default value : `false`
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:45

`ibmOverflowMenu` | Takes a template ref of `OverflowMenuOptions`s Type : `TemplateRef<any>`
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:41

### HostListeners

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

### Methods

onDialogChanges
`onDialogChanges()`
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:68
Returns : `void`

onDialogInit
`onDialogInit()`
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:64
Returns : `void`

updateConfig
`updateConfig()`
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:59
Returns : `void`

    import {
    	Directive,
    	ElementRef,
    	ViewContainerRef,
    	Input,
    	TemplateRef,
    	HostListener
    } from "@angular/core";
    import { DialogDirective } from "./../dialog.directive";
    import { DialogService } from "./../dialog.service";
    import { OverflowMenuPane } from "./overflow-menu-pane.component";

    /**
     * Directive for extending `Dialog` to create overflow menus.
     *
     * class: OverflowMenuDirective (extends DialogDirective)
     *
     *
     * selector: `ibmOverflowMenu`
     *
     *
     * ```html
     * <div [ibmOverflowMenu]="templateRef"></div>
     * <ng-template #templateRef>
     * 	<!-- overflow menu options here -->
     * </ng-template>
     * ```
     */
    @Directive({
    	selector: "[ibmOverflowMenu]",
    	exportAs: "ibmOverflowMenu",
    	providers: [
    		DialogService
    	]
    })
    export class OverflowMenuDirective extends DialogDirective {
    	/**
    	 * Takes a template ref of `OverflowMenuOptions`s
    	 */
    	@Input() ibmOverflowMenu: TemplateRef<any>;
    	/**
    	 * Controls wether the overflow menu is flipped
    	 */
    	@Input() flip = false;

    	/**
    	 * Creates an instance of `OverflowMenuDirective`.
    	 */
    	constructor(
    		protected elementRef: ElementRef,
    		protected viewContainerRef: ViewContainerRef,
    		protected dialogService: DialogService
    	) {
    		super(elementRef, viewContainerRef, dialogService);
    		dialogService.create(OverflowMenuPane);
    	}

    	updateConfig() {
    		this.dialogConfig.content = this.ibmOverflowMenu;
    		this.dialogConfig.flip = this.flip;
    	}

    	onDialogInit() {
    		this.updateConfig();
    	}

    	onDialogChanges() {
    		this.updateConfig();
    	}

    	@HostListener("keydown", ["$event"])
    	hostkeys(event: KeyboardEvent) {
    		switch (event.key) {
    			case "Enter":
    			case " ":
    				event.preventDefault();
    				this.toggle();
    				break;
    		}
    	}
    }

# result-matching ""

# No results matching ""