### File

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

### Description

A toggle for the side navigation

### Metadata

selector | `ibm-hamburger`
template |
    <button
    	type="button"
    	(click)="doClick()"
    	[ngClass]="{'bx--header__action--active': active}"
    	class="bx--header__menu-trigger bx--header__action bx--header__menu-toggle"
    	[attr.aria-label]="i18n.get('UI_SHELL.HEADER.MENU') | async"
    	[attr.title]="i18n.get('UI_SHELL.HEADER.MENU') | async">
    	<svg *ngIf="!active" ibmIconMenu20></svg>
    	<svg *ngIf="active" ibmIconClose20></svg>
    </button>

### Index

###### Properties
Public i18n
###### Methods
Public doClick
###### Inputs
active
###### Outputs
selected

### Constructor

`constructor(i18n: I18n)`
Defined in src/ui-shell/header/hamburger.component.ts:36
Parameters :
Name | Type | Optional
i18n | `I18n` | No

### Inputs

`active` | Controls the active/selected state for the `Hamburger` menu. Default value : `false`
Defined in src/ui-shell/header/hamburger.component.ts:31

### Outputs

`selected` | `EventEmitter` to notify parent components of menu click events. `$event` Type: `EventEmitter<Object>`
Defined in src/ui-shell/header/hamburger.component.ts:36

### Methods

Public doClick
`doClick()`
Defined in src/ui-shell/header/hamburger.component.ts:43
Emit the Hamburger click event upwards. Returns : `void`

### Properties

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

    import {
    	Component,
    	Output,
    	EventEmitter,
    	Input
    } from "@angular/core";
    import { I18n } from "../../i18n/i18n.module";

    /**
     * A toggle for the side navigation
     */
    @Component({
    	selector: "ibm-hamburger",
    	template: `
    		<button
    			type="button"
    			(click)="doClick()"
    			[ngClass]="{'bx--header__action--active': active}"
    			class="bx--header__menu-trigger bx--header__action bx--header__menu-toggle"
    			[attr.aria-label]="i18n.get('UI_SHELL.HEADER.MENU') | async"
    			[attr.title]="i18n.get('UI_SHELL.HEADER.MENU') | async">
    			<svg *ngIf="!active" ibmIconMenu20></svg>
    			<svg *ngIf="active" ibmIconClose20></svg>
    		</button>
    	`
    })
    export class Hamburger {
    	/**
    	 * Controls the active/selected state for the `Hamburger` menu.
    	 */
    	@Input() active = false;

    	/**
    	 * `EventEmitter` to notify parent components of menu click events.
    	 */
    	@Output() selected: EventEmitter<Object> = new EventEmitter<Object>();

    	constructor(public i18n: I18n) { }

    	/**
    	 * Emit the Hamburger click event upwards.
    	 */
    	public doClick() {
    		this.selected.emit(this.active);
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""