### File

`src/ui-shell/header/header.component.ts`

### Description

A fixed header and navigation. Header may contain a Hamburger menu to toggle the side navigation, navigation actions, and global actions (generally in the form of `Panel`s).

See demo

../../iframe.html?id=ui-shell--header

### Metadata

selector | `ibm-header`
template |
    <header
    	class="bx--header"
    	role="banner"
    	[attr.aria-label]="brand + ' ' + name">
    	<a
    		*ngIf="!skipTo"
    		class="bx--skip-to-content"
    		[href]="skipTo"
    		tabindex="0">
    		{{ i18n.get("UI_SHELL.SKIP_TO") | async }}
    	</a>
    	<ng-content select="ibm-hamburger"></ng-content>
    	<ng-template
    		*ngIf="isTemplate(brand)"
    		[ngTemplateOutlet]="brand">
    	</ng-template>
    	<a
    		*ngIf="!isTemplate(brand)"
    		class="bx--header__name"
    		[href]="href"
    		(click)="navigate($event)">
    		<span class="bx--header__name--prefix">{{brand}}&nbsp;</span>
    		{{name}}
    	</a>
    	<ng-content></ng-content>
    </header>

### Index

###### Properties
Protected _href Public i18n
###### Methods
Public isTemplate navigate
###### Inputs
brand href name route routeExtras skipTo
###### Outputs
navigation
###### Accessors
href

### Constructor

`constructor(i18n: I18n, domSanitizer: DomSanitizer, router: Router)`
Defined in src/ui-shell/header/header.component.ts:94
Parameters :
Name | Type | Optional
i18n | `I18n` | No
domSanitizer | `DomSanitizer` | No
router | `Router` | No

### Inputs

`brand` | Top level branding. Defaults to "IBM" Type : `string | TemplateRef<any>` Default value : `"IBM"`
Defined in src/ui-shell/header/header.component.ts:65

`href` | Optional link for the header Type : `string`
Defined in src/ui-shell/header/header.component.ts:69

`name` | Label that shows to the right of the `brand` text. Generally a product name. Type : `string`
Defined in src/ui-shell/header/header.component.ts:61

`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/header/header.component.ts:81

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

`skipTo` | ID in the main body content to jump to. Used by keyboard and screen reader users to skip the header content. Type : `string`
Defined in src/ui-shell/header/header.component.ts:57

### Outputs

`navigation` | Emits the navigation status promise when the link is activated `$event` Type: `EventEmitter`
Defined in src/ui-shell/header/header.component.ts:92

### Methods

Public isTemplate
`isTemplate(value)`
Defined in src/ui-shell/header/header.component.ts:101
Parameters :
Name | Optional
value | No
Returns : `boolean`

navigate
`navigate(event)`
Defined in src/ui-shell/header/header.component.ts:105
Parameters :
Name | Optional
event | No
Returns : `void`

### Properties

Protected _href
`_href: `string``
Type : `string`
Default value : `"javascript:void(0)"`
Defined in src/ui-shell/header/header.component.ts:94

Public i18n
`i18n: `I18n``
Type : `I18n`
Defined in src/ui-shell/header/header.component.ts:97

### Accessors

href
get `href()`
Defined in src/ui-shell/header/header.component.ts:73
set `href(v: string)`
Defined in src/ui-shell/header/header.component.ts:69
Optional link for the header Parameters :
Name | Type | Optional
v | `string` | No
Returns : `void`

    import {
    	Component,
    	Input,
    	Optional,
    	Output,
    	EventEmitter,
    	TemplateRef
    } from "@angular/core";
    import { DomSanitizer } from "@angular/platform-browser";
    import { Router } from "@angular/router";
    import { I18n } from "../../i18n/i18n.module";

    /**
     * A fixed header and navigation.
     * Header may contain a Hamburger menu to toggle the side navigation, navigation actions,
     * and global actions (generally in the form of `Panel`s).
     *
     * [See demo](../../?path=/story/ui-shell--header)
     *
     * <example-url>../../iframe.html?id=ui-shell--header</example-url>
     */
    @Component({
    	selector: "ibm-header",
    	template: `
    		<header
    			class="bx--header"
    			role="banner"
    			[attr.aria-label]="brand + ' ' + name">
    			<a
    				*ngIf="!skipTo"
    				class="bx--skip-to-content"
    				[href]="skipTo"
    				tabindex="0">
    				{{ i18n.get("UI_SHELL.SKIP_TO") | async }}
    			</a>
    			<ng-content select="ibm-hamburger"></ng-content>
    			<ng-template
    				*ngIf="isTemplate(brand)"
    				[ngTemplateOutlet]="brand">
    			</ng-template>
    			<a
    				*ngIf="!isTemplate(brand)"
    				class="bx--header__name"
    				[href]="href"
    				(click)="navigate($event)">
    				<span class="bx--header__name--prefix">{{brand}}&nbsp;</span>
    				{{name}}
    			</a>
    			<ng-content></ng-content>
    		</header>
    	`
    })
    export class Header {
    	/**
    	 * ID in the main body content to jump to. Used by keyboard and screen reader users to skip the header content.
    	 */
    	@Input() skipTo: string;
    	/**
    	 * Label that shows to the right of the `brand` text. Generally a product name.
    	 */
    	@Input() name: string;
    	/**
    	 * Top level branding. Defaults to "IBM"
    	 */
    	@Input() brand: string | TemplateRef<any> = "IBM";
    	/**
    	 * Optional link for the header
    	 */
    	@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>>();

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

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

    	public isTemplate(value) {
    		return value instanceof TemplateRef;
    	}

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