### File

`src/breadcrumb/breadcrumb-item.component.ts`

### Metadata

selector | `ibm-breadcrumb-item`
template |
    <a
    	class="bx--link"
    	[href]="(skeleton ? '/#' : href)"
    	(click)="navigate($event)"
    	[attr.aria-current]="(current ? ariaCurrent : null)"
    	*ngIf="useTemplate(); else content">
    	<ng-container *ngTemplateOutlet="content"></ng-container>
    </a>
    <ng-template #content>
    	<ng-content></ng-content>
    </ng-template>

### Index

###### Properties
Protected _href
###### Methods
navigate useTemplate
###### Inputs
ariaCurrent current href route routeExtras skeleton
###### Outputs
navigation
###### HostBindings
class.bx--breadcrumb-item
###### Accessors
href

### Constructor

`constructor(domSanitizer: DomSanitizer, router: Router)`
Defined in src/breadcrumb/breadcrumb-item.component.ts:61
Parameters :
Name | Type | Optional
domSanitizer | `DomSanitizer` | No
router | `Router` | No

### Inputs

`ariaCurrent` | Default value : `"page"`
Defined in src/breadcrumb/breadcrumb-item.component.ts:55

`current` | Default value : `false`
Defined in src/breadcrumb/breadcrumb-item.component.ts:57

`href` | Type : `string`
Defined in src/breadcrumb/breadcrumb-item.component.ts:28

`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/breadcrumb/breadcrumb-item.component.ts:40

`routeExtras` | Router options. Used in conjunction with `route` See: https://angular.io/api/router/Router#navigate Type : `any`
Defined in src/breadcrumb/breadcrumb-item.component.ts:46

`skeleton` | Default value : `false`
Defined in src/breadcrumb/breadcrumb-item.component.ts:53

### Outputs

`navigation` | Emits the navigation status promise when the link is activated `$event` Type: `EventEmitter`
Defined in src/breadcrumb/breadcrumb-item.component.ts:51

### HostBindings

class.bx--breadcrumb-item
`class.bx--breadcrumb-item: ```
Default value : `true`
Defined in src/breadcrumb/breadcrumb-item.component.ts:59

### Methods

navigate
`navigate(event)`
Defined in src/breadcrumb/breadcrumb-item.component.ts:69
Parameters :
Name | Optional
event | No
Returns : `void`

useTemplate
`useTemplate()`
Defined in src/breadcrumb/breadcrumb-item.component.ts:65
Returns : `any`

### Properties

Protected _href
`_href: ```
Defined in src/breadcrumb/breadcrumb-item.component.ts:61

### Accessors

href
get `href()`
Defined in src/breadcrumb/breadcrumb-item.component.ts:32
set `href(v: string)`
Defined in src/breadcrumb/breadcrumb-item.component.ts:28
Parameters :
Name | Type | Optional
v | `string` | No
Returns : `void`

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

    @Component({
    	selector: "ibm-breadcrumb-item",
    	template: `
    	<a
    		class="bx--link"
    		[href]="(skeleton ? '/#' : href)"
    		(click)="navigate($event)"
    		[attr.aria-current]="(current ? ariaCurrent : null)"
    		*ngIf="useTemplate(); else content">
    		<ng-container *ngTemplateOutlet="content"></ng-container>
    	</a>
    	<ng-template #content>
    		<ng-content></ng-content>
    	</ng-template>`
    })
    export class BreadcrumbItemComponent {
    	@Input() set href(v: string) {
    		this._href = v;
    	}

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

    	/**
    	 * 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;

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

    	@Input() skeleton = false;

    	@Input() ariaCurrent = "page";

    	@HostBinding("class.bx--breadcrumb-item--current") @Input() current = false;

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

    	protected _href;

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

    	useTemplate() {
    		return this.skeleton || this._href || this.route;
    	}

    	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 ""