### File

`src/content-switcher/content-switcher-option.directive.ts`

### Metadata

Selector | `[ibmContentOption]`

### Index

###### Properties

- Protected _active

###### Inputs

- active
- name

###### Outputs

- selected

###### HostBindings

- attr.aria-selected
- attr.role
- attr.tabIndex
- class
- class.bx--content-switcher--selected

###### HostListeners

- click
- focus

###### Accessors

- active

### Inputs

`active` | Used to activate the option. Only one option may be `active` at a time Type : `boolean`
Defined in src/content-switcher/content-switcher-option.directive.ts:17

`name` | Internal name for the option. Should be something that identifies the option to the application. Accessible from the `ContentSwitcher` `selected` emitter Default value : `"option"`
Defined in src/content-switcher/content-switcher-option.directive.ts:33

### Outputs

`selected` | Emits when the option is selected. `$event` Type: `EventEmitter`
Defined in src/content-switcher/content-switcher-option.directive.ts:38

### HostBindings

attr.aria-selected
`attr.aria-selected: ```
Default value : `false`
Defined in src/content-switcher/content-switcher-option.directive.ts:43

attr.role
`attr.role: ```
Default value : `"tab"`
Defined in src/content-switcher/content-switcher-option.directive.ts:42

attr.tabIndex
`attr.tabIndex: ```
Default value : `"-1"`
Defined in src/content-switcher/content-switcher-option.directive.ts:44

class
`class: ```
Default value : `"bx--content-switcher-btn"`
Defined in src/content-switcher/content-switcher-option.directive.ts:40

class.bx--content-switcher--selected
`class.bx--content-switcher--selected: ```
Default value : `false`
Defined in src/content-switcher/content-switcher-option.directive.ts:41

### HostListeners

click
`click()`
Defined in src/content-switcher/content-switcher-option.directive.ts:49

focus
`focus()`
Defined in src/content-switcher/content-switcher-option.directive.ts:55

### Properties

Protected _active
`_active: ```
Default value : `false`
Defined in src/content-switcher/content-switcher-option.directive.ts:46

### Accessors

active
get `active()`
Defined in src/content-switcher/content-switcher-option.directive.ts:24
set `active(value: boolean)`
Defined in src/content-switcher/content-switcher-option.directive.ts:17

Used to activate the option. Only one option may be `active` at a time

Parameters :

Name | Type | Optional
value | `boolean` | No

Returns : `void`

    import {
    	Directive,
    	HostBinding,
    	Input,
    	HostListener,
    	Output,
    	EventEmitter
    } from "@angular/core";

    @Directive({
    	selector: "[ibmContentOption]"
    })
    export class ContentSwitcherOption {
    	/**
    	 * Used to activate the option. Only one option may be `active` at a time
    	 */
    	@Input() set active (value: boolean) {
    		this._active = value;
    		this.selectedClass = value;
    		this.ariaSelected = value;
    		this.tabindex = value ? "0" : "-1";
    	}

    	get active() {
    		return this._active;
    	}

    	/**
    	 * Internal name for the option.
    	 * Should be something that identifies the option to the application.
    	 * Accessible from the `ContentSwitcher` `selected` emitter
    	 */
    	@Input() name = "option";

    	/**
    	 * Emits when the option is selected.
    	 */
    	@Output() selected = new EventEmitter();

    	@HostBinding("class") switcherClass = "bx--content-switcher-btn";
    	@HostBinding("class.bx--content-switcher--selected") selectedClass = false;
    	@HostBinding("attr.role") role = "tab";
    	@HostBinding("attr.aria-selected") ariaSelected = false;
    	@HostBinding("attr.tabIndex") tabindex = "-1";

    	protected _active = false;

    	@HostListener("click")
    	hostClick() {
    		this.active = true;
    		this.selected.emit(true);
    	}

    	@HostListener("focus")
    	onFocus() {
    		this.active = true;
    		this.selected.emit(true);
    	}
    }

# result-matching ""

# No results matching ""