### File

`src/ui-shell/panel/switcher-list-item.component.ts`

### Description

Represents an item in a switcher list.

Note: `ibm-product-x` selectors and components are deprecated and will be removed in the next major version

### Metadata

selector | `ibm-switcher-list-item, ibm-product-switcher-list-item, ibm-product-switcher-item`
template |
    <a
    	class="bx--switcher__item-link"
    	[ngClass]="{
    		'bx--switcher__item-link--selected': active
    	}"
    	[href]="href"
    	(click)="navigate($event)">
    	<ng-content></ng-content>
    </a>

### Index

###### Properties
Protected _href
###### Methods
navigate
###### Inputs
active href route routeExtras
###### Outputs
navigation
###### HostBindings
class.bx--switcher__item
###### Accessors
href

### Constructor

`constructor(domSanitizer: DomSanitizer, router: Router)`
Defined in src/ui-shell/panel/switcher-list-item.component.ts:67
Parameters :
Name | Type | Optional
domSanitizer | `DomSanitizer` | No
router | `Router` | No

### Inputs

`active` | Enables the "active" state for an item. Commonly used to indicate the current page or selection. Default value : `false`
Defined in src/ui-shell/panel/switcher-list-item.component.ts:35

`href` | Optional link for the underlying anchor. Type : `string`
Defined in src/ui-shell/panel/switcher-list-item.component.ts:52

`route` | Array of commands to send to the router when the link is activated See: https://angular.io/api/router/Router#navigate Type : `any[]`
Defined in src/ui-shell/panel/switcher-list-item.component.ts:41

`routeExtras` | Router options. Used in conjunction with `route` See: https://angular.io/api/router/Router#navigate Type : `any`
Defined in src/ui-shell/panel/switcher-list-item.component.ts:47

### Outputs

`navigation` | Emits the navigation status promise when the link is activated `$event` Type: `EventEmitter`
Defined in src/ui-shell/panel/switcher-list-item.component.ts:59

### HostBindings

class.bx--switcher__item
`class.bx--switcher__item: ```
Default value : `true`
Defined in src/ui-shell/panel/switcher-list-item.component.ts:65

### Methods

navigate
`navigate(event)`
Defined in src/ui-shell/panel/switcher-list-item.component.ts:71
Parameters :
Name | Optional
event | No
Returns : `void`

### Properties

Protected _href
`_href: `string``
Type : `string`
Default value : `"javascript:void(0)"`
Defined in src/ui-shell/panel/switcher-list-item.component.ts:67

### Accessors

href
get `href()`
Defined in src/ui-shell/panel/switcher-list-item.component.ts:61
set `href(value: string)`
Defined in src/ui-shell/panel/switcher-list-item.component.ts:52
Optional link for the underlying anchor. Parameters :
Name | Type | Optional
value | `string` | No
Returns : `void`

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	Optional,
      HostBinding
    } from "@angular/core";
    import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
    import { Router } from '@angular/router';

    /**
     * Represents an item in a switcher list.
     *
     * **Note:** `ibm-product-x` selectors and components are deprecated and will be removed in the next major version
     */
    @Component({
    	selector: "ibm-switcher-list-item, ibm-product-switcher-list-item, ibm-product-switcher-item",
    	template: `
    		<a
    			class="bx--switcher__item-link"
    			[ngClass]="{
    				'bx--switcher__item-link--selected': active
    			}"
    			[href]="href"
    			(click)="navigate($event)">
    			<ng-content></ng-content>
    		</a>
    	`
    })
    export class SwitcherListItem {
    	/**
    	 * Enables the "active" state for an item. Commonly used to indicate the current page or selection.
    	 */
    	@Input() active = false;

    	/**
    	 * Array of commands to send to the router when the link is activated
    	 * See: https://angular.io/api/router/Router#navigate
    	 */
    	@Input() route: any[];

    	/**
    	 * Router options. Used in conjunction with `route`
    	 * See: https://angular.io/api/router/Router#navigate
    	 */
    	@Input() routeExtras: any;

    	/**
    	 * Optional link for the underlying anchor.
    	 */
    	@Input() set href(value: string) {
    		this._href = value;
    	}

    	/**
    	 * Emits the navigation status promise when the link is activated
    	 */
    	@Output() navigation = new EventEmitter<Promise<boolean>>();

    	get href() {
    		return this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;
    	}

    	@HostBinding("class.bx--switcher__item") itemClass = true;

    	protected _href = "javascript:void(0)";

    	constructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) { }

    	navigate(event) {
    		if (this.router && this.route) {
    			event.preventDefault();
    			const status = this.router.navigate(this.route, this.routeExtras);
    			this.navigation.emit(status);
    		}
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""