### File

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

### Description

Contained by `HeaderGlobal`. Generally used to trigger `Panel`s

### Metadata

selector | `ibm-header-action`

template

    <button
    	class="bx--header__action"
    	[ngClass]="{
    		'bx--header__action--active': active
    	}"
    	[attr.aria-label]="title"
    	[title]="title"
    	(click)="onClick()">
    	<ng-content></ng-content>
    	<svg ibmIconClose20 class="bx--navigation-menu-panel-collapse-icon"></svg>
    </button>

### Index

###### Methods

- onClick

###### Inputs

- active
- activeChange
- title

###### Outputs

- selected

### Inputs

`active` | Toggles the active state. May be used to toggle a `Panel`s active state. Default value : `false`
Defined in src/ui-shell/header/header-action.component.ts:35

`activeChange` | "Change" emitter to allow double binding to the `active` Input. Type : `EventEmitter` Default value : `new EventEmitter<boolean>()`
Defined in src/ui-shell/header/header-action.component.ts:39

`title` | Title. Populates the aria-label as well as the browser `title` tooltip Default value : `""`
Defined in src/ui-shell/header/header-action.component.ts:31

### Outputs

`selected` | Emits when the action has been clicked. `$event` Type: `EventEmitter`
Defined in src/ui-shell/header/header-action.component.ts:43

### Methods

onClick
`onClick()`
Defined in src/ui-shell/header/header-action.component.ts:45
Returns : `void`

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter
    } from "@angular/core";

    /**
     * Contained by `HeaderGlobal`. Generally used to trigger `Panel`s
     */
    @Component({
    	selector: "ibm-header-action",
    	template: `
    		<button
    			class="bx--header__action"
    			[ngClass]="{
    				'bx--header__action--active': active
    			}"
    			[attr.aria-label]="title"
    			[title]="title"
    			(click)="onClick()">
    			<ng-content></ng-content>
    			<svg ibmIconClose20 class="bx--navigation-menu-panel-collapse-icon"></svg>
    		</button>
    	`
    })
    export class HeaderAction {
    	/**
    	 * Title. Populates the aria-label as well as the browser `title` tooltip
    	 */
    	@Input() title = "";
    	/**
    	 * Toggles the active state. May be used to toggle a `Panel`s active state.
    	 */
    	@Input() active = false;
    	/**
    	 * "Change" emitter to allow double binding to the `active` Input.
    	 */
    	@Input() activeChange = new EventEmitter<boolean>();
    	/**
    	 * Emits when the action has been clicked.
    	 */
    	@Output() selected = new EventEmitter<boolean>();

    	onClick() {
    		this.active = !this.active;
    		this.selected.emit(this.active);
    		this.activeChange.emit(this.active);
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""