### File

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

### Description

`OverflowMenuOption` represents a single option in an overflow menu

Presently it has three possible states - normal, disabled, and danger:

     * <ibm-overflow-menu-option>Simple option</ibm-overflow-menu-option>
     * <ibm-overflow-menu-option disabled="true">Disabled</ibm-overflow-menu-option>
     * <ibm-overflow-menu-option type="danger">Danger option</ibm-overflow-menu-option>
     *

For content that expands beyond the overflow menu `OverflowMenuOption` automatically adds a title attribute.

### Implements

`AfterViewInit`

### Metadata

selector | `ibm-overflow-menu-option`
template |
    <button
    	*ngIf="!href"
    	class="bx--overflow-menu-options__btn"
    	role="menuitem"
    	[tabindex]="tabIndex"
    	(focus)="onFocus()"
    	(blur)="onBlur()"
    	(click)="onClick()"
    	[disabled]="disabled"
    	[attr.title]="title">
    	<ng-container *ngTemplateOutlet="tempOutlet"></ng-container>
    </button>

    <a
    	*ngIf="href"
    	class="bx--overflow-menu-options__btn"
    	role="menuitem"
    	[tabindex]="tabIndex"
    	(focus)="onFocus()"
    	(blur)="onBlur()"
    	(click)="onClick()"
    	[attr.disabled]="disabled"
    	[href]="href"
    	[attr.title]="title">
    	<ng-container *ngTemplateOutlet="tempOutlet"></ng-container>
    </a>

    <ng-template #tempOutlet>
    	<div class="bx--overflow-menu-options__option-content">
    		<ng-content></ng-content>
    	</div>
    </ng-template>

### Index

###### Properties
Public tabIndex Public title
###### Methods
ngAfterViewInit onBlur onClick onFocus
###### Inputs
disabled href type
###### Outputs
selected
###### HostBindings
attr.role class class.bx--overflow-menu-options__option--danger class.bx--overflow-menu-options__option--disabled

### Constructor

`constructor(elementRef: ElementRef)`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:89
Parameters :
Name | Type | Optional
elementRef | `ElementRef` | No

### Inputs

`disabled` | disable/enable interactions Default value : `false`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:80

`href` | Type : `string`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:82

`type` | toggles between `normal` and `danger` states Type : `"normal" | "danger"` Default value : `"normal"`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:76

### Outputs

`selected` | `$event` Type: `EventEmitter<any>`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:84

### HostBindings

attr.role
`attr.role: ```
Default value : `"presentation"`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:62

class
`class: ```
Default value : `"bx--overflow-menu-options__option"`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:61

class.bx--overflow-menu-options__option--danger
`class.bx--overflow-menu-options__option--danger: `Boolean``
Type : `Boolean`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:65

class.bx--overflow-menu-options__option--disabled
`class.bx--overflow-menu-options__option--disabled: `Boolean``
Type : `Boolean`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:70

### Methods

ngAfterViewInit
`ngAfterViewInit()`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:105
Returns : `void`

onBlur
`onBlur()`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:101
Returns : `void`

onClick
`onClick()`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:93
Returns : `void`

onFocus
`onFocus()`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:97
Returns : `void`

### Properties

Public tabIndex
`tabIndex: ```
Default value : `-1`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:86

Public title
`title: `null``
Type : `null`
Default value : `null`
Defined in src/dialog/overflow-menu/overflow-menu-option.component.ts:89

    import {
    	HostBinding,
    	Component,
    	Input,
    	ElementRef,
    	Output,
    	EventEmitter,
    	AfterViewInit
    } from "@angular/core";

    /**
     * `OverflowMenuOption` represents a single option in an overflow menu
     *
     * Presently it has three possible states - normal, disabled, and danger:
     * ```
     * <ibm-overflow-menu-option>Simple option</ibm-overflow-menu-option>
     * <ibm-overflow-menu-option disabled="true">Disabled</ibm-overflow-menu-option>
     * <ibm-overflow-menu-option type="danger">Danger option</ibm-overflow-menu-option>
     * ```
     *
     * For content that expands beyond the overflow menu `OverflowMenuOption` automatically adds a title attribute.
     */
    @Component({
    	selector: "ibm-overflow-menu-option",
    	template: `
    		<button
    			*ngIf="!href"
    			class="bx--overflow-menu-options__btn"
    			role="menuitem"
    			[tabindex]="tabIndex"
    			(focus)="onFocus()"
    			(blur)="onBlur()"
    			(click)="onClick()"
    			[disabled]="disabled"
    			[attr.title]="title">
    			<ng-container *ngTemplateOutlet="tempOutlet"></ng-container>
    		</button>

    		<a
    			*ngIf="href"
    			class="bx--overflow-menu-options__btn"
    			role="menuitem"
    			[tabindex]="tabIndex"
    			(focus)="onFocus()"
    			(blur)="onBlur()"
    			(click)="onClick()"
    			[attr.disabled]="disabled"
    			[href]="href"
    			[attr.title]="title">
    			<ng-container *ngTemplateOutlet="tempOutlet"></ng-container>
    		</a>

    		<ng-template #tempOutlet>
    			<div class="bx--overflow-menu-options__option-content">
    				<ng-content></ng-content>
    			</div>
    		</ng-template>
    	`
    })
    export class OverflowMenuOption implements AfterViewInit {
    	@HostBinding("class") optionClass = "bx--overflow-menu-options__option";
    	@HostBinding("attr.role") role = "presentation";

    	@HostBinding("class.bx--overflow-menu-options__option--danger")
    	public get isDanger(): Boolean {
    		return this.type === "danger";
    	}

    	@HostBinding("class.bx--overflow-menu-options__option--disabled")
    	public get isDisabled(): Boolean {
    		return this.disabled;
    	}
    	/**
    	 * toggles between `normal` and `danger` states
    	 */
    	@Input() type: "normal" | "danger" = "normal";
    	/**
    	 * disable/enable interactions
    	 */
    	@Input() disabled = false;

    	@Input() href: string;

    	@Output() selected: EventEmitter<any> = new EventEmitter();

    	public tabIndex = -1;
    	// note: title must be a real attribute (i.e. not a getter) as of Angular@6 due to
    	// change after checked errors
    	public title = null;

    	constructor(protected elementRef: ElementRef) {}

    	onClick() {
    		this.selected.emit();
    	}

    	onFocus() {
    		setTimeout(() => this.tabIndex = 0);
    	}

    	onBlur() {
    		setTimeout(() => this.tabIndex = -1);
    	}

    	ngAfterViewInit() {
    		const button = this.elementRef.nativeElement.querySelector("button, a");
    		if (button.scrollWidth > button.offsetWidth) {
    			this.title = button.textContent;
    		}
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""