### File

`src/content-switcher/content-switcher.component.ts`

### Description

The content switcher can be used for toggling between distinct options. Similar to tabs, but without an associated content panel

See demo

     * <ibm-content-switcher (selected)="selected($event)">
     *        <button ibmContentOption>First section</button>
     *        <button ibmContentOption>Second section</button>
     *        <button ibmContentOption>Third section</button>
     *    </ibm-content-switcher>
     *

../../iframe.html?id=content-switcher--basic

### Implements

`AfterViewInit`

### Metadata

selector | `ibm-content-switcher`
template |
    <div
    	[attr.aria-label]="ariaLabel"
    	class="bx--content-switcher"
    	role="tablist">
    	<ng-content></ng-content>
    </div>

### Index

###### Properties
options
###### Methods
ngAfterViewInit
###### Inputs
ariaLabel label
###### Outputs
selected
###### HostListeners
keydown
###### Accessors
label

### Constructor

`constructor(elementRef: ElementRef)`
Defined in src/content-switcher/content-switcher.component.ts:63
Parameters :
Name | Type | Optional
elementRef | `ElementRef` | No

### Inputs

`ariaLabel` | Default value : `"content switcher"`
Defined in src/content-switcher/content-switcher.component.ts:56

`label` | aria-label for the content switcher. Should be set to something descriptive Type : `string`
Defined in src/content-switcher/content-switcher.component.ts:46

### Outputs

`selected` | Emits the activated `ContentSwitcherOption` `$event` Type: `EventEmitter`
Defined in src/content-switcher/content-switcher.component.ts:61

### HostListeners

keydown
Arguments : `'$event'`
`keydown(event: KeyboardEvent)`
Defined in src/content-switcher/content-switcher.component.ts:88

### Methods

ngAfterViewInit
`ngAfterViewInit()`
Defined in src/content-switcher/content-switcher.component.ts:67
Returns : `void`

### Properties

options
`options: `QueryList<ContentSwitcherOption>``
Type : `QueryList<ContentSwitcherOption>`
Decorators : `@ContentChildren(ContentSwitcherOption)`
Defined in src/content-switcher/content-switcher.component.ts:63

### Accessors

label
get `label()`
Defined in src/content-switcher/content-switcher.component.ts:51
set `label(value: string)`
Defined in src/content-switcher/content-switcher.component.ts:46
aria-label for the content switcher. Should be set to something descriptive Parameters :
Name | Type | Optional
value | `string` | No
Returns : `void`

    import {
    	Component,
    	Input,
    	ContentChildren,
    	QueryList,
    	Output,
    	EventEmitter,
    	AfterViewInit,
    	HostListener,
    	ElementRef
    } from "@angular/core";
    import { ContentSwitcherOption } from "./content-switcher-option.directive";
    import { isFocusInLastItem, isFocusInFirstItem } from "./../common/tab.service";

    /**
     * The content switcher can be used for toggling between distinct options.
     * Similar to tabs, but without an associated content panel
     *
     * [See demo](../../?path=/story/content-switcher--basic)
     *
     * ```html
     * <ibm-content-switcher (selected)="selected($event)">
     *		<button ibmContentOption>First section</button>
     *		<button ibmContentOption>Second section</button>
     *		<button ibmContentOption>Third section</button>
     *	</ibm-content-switcher>
     *	```
     *
     * <example-url>../../iframe.html?id=content-switcher--basic</example-url>
     */
    @Component({
    	selector: "ibm-content-switcher",
    	template: `
    		<div
    			[attr.aria-label]="ariaLabel"
    			class="bx--content-switcher"
    			role="tablist">
    			<ng-content></ng-content>
    		</div>
    	`
    })
    export class ContentSwitcher implements AfterViewInit {
    	/**
    	 * aria-label for the content switcher. Should be set to something descriptive
    	 */
    	@Input() set label(value: string) {
    		console.warn("`label` is deprecated (to be removed in next major version). Use `ariaLabel` instead.");
    		this.ariaLabel = value;
    	}

    	get label(): string {
    		console.warn("`label` is deprecated (to be removed in next major version). Use `ariaLabel` instead.");
    		return this.ariaLabel;
    	}

    	@Input() ariaLabel = "content switcher";

    	/**
    	 * Emits the activated `ContentSwitcherOption`
    	 */
    	@Output() selected = new EventEmitter();

    	@ContentChildren(ContentSwitcherOption) options: QueryList<ContentSwitcherOption>;

    	constructor(protected elementRef: ElementRef) {}

    	ngAfterViewInit() {
    		const firstActive = this.options.find(option => option.active);
    		// delay setting active until the DOM has settled
    		if (!firstActive) {
    			setTimeout(() => this.options.first.active = true);
    		}
    		// subscribe to each item, emit when one is selected, and reset the active states
    		this.options.forEach(option => {
    			option.selected.subscribe(_ => {
    				const active = option;
    				this.options.forEach(option => {
    					if (option !== active) {
    						option.active = false;
    					}
    				});
    				this.selected.emit(active);
    			});
    		});
    	}

    	@HostListener("keydown", ["$event"])
    	hostkeys(event: KeyboardEvent) {
    		const buttonList = Array.from<any>(this.elementRef.nativeElement.querySelectorAll("[ibmContentOption]"));

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

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

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

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

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""