### File

`src/modal/modal-header.component.ts`

### Description

Inputs

     * <ibm-modal-header>Header text</ibm-modal-header>
     *

Outputs

     * <ibm-modal-header (closeSelect)="closeModal()">Header text</ibm-modal-header>
     *

### Metadata

selector | `ibm-modal-header`
template |
    <header class="{{theme}} bx--modal-header">
    	<ng-content></ng-content>
    	<button
    		type="button"
    		class="bx--modal-close"
    		[attr.aria-label]="closeLabel"
    		(click)="onClose()">
    		<ibm-icon-close16 class="bx--modal-close__icon"></ibm-icon-close16>
    	</button>
    </header>

### Index

###### Methods
Public onClose
###### Inputs
closeLabel theme
###### Outputs
closeSelect
###### Accessors
isExperimental

### Constructor

`constructor(i18n: I18n, experimental: ExperimentalService)`
Defined in src/modal/modal-header.component.ts:55
Parameters :
Name | Type | Optional
i18n | `I18n` | No
experimental | `ExperimentalService` | No

### Inputs

`closeLabel` | Accessible label for the header close button. Defaults to the `MODAL.CLOSE` value from the i18n service. Default value : `this.i18n.get().MODAL.CLOSE`
Defined in src/modal/modal-header.component.ts:46

`theme` | Sets the style on the modal heading based on its category. Default value : `"default"`
Defined in src/modal/modal-header.component.ts:41

### Outputs

`closeSelect` | To emit the event of clicking on the close icon within the modal. `$event` Type: `EventEmitter`
Defined in src/modal/modal-header.component.ts:51

### Methods

Public onClose
`onClose()`
Defined in src/modal/modal-header.component.ts:62
Handles click for the close icon button within the `Modal`. Returns : `void`

### Accessors

isExperimental
get `isExperimental()`
Defined in src/modal/modal-header.component.ts:53

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

    /**
     * ***Inputs***
     * ```html
     * <ibm-modal-header>Header text</ibm-modal-header>
     * ```
     *
     * ***Outputs***
     * ```html
     * <ibm-modal-header (closeSelect)="closeModal()">Header text</ibm-modal-header>
     * ```
     */
    @Component({
    	selector: "ibm-modal-header",
    	template: `
    		<header class="{{theme}} bx--modal-header">
    			<ng-content></ng-content>
    			<button
    				type="button"
    				class="bx--modal-close"
    				[attr.aria-label]="closeLabel"
    				(click)="onClose()">
    				<ibm-icon-close16 class="bx--modal-close__icon"></ibm-icon-close16>
    			</button>
    		</header>

    	`
    })
    export class ModalHeader {
    	/**
    	 * Sets the style on the modal heading based on its category.
    	 */
    	@Input() theme = "default";
    	/**
    	 * Accessible label for the header close button.
    	 * Defaults to the `MODAL.CLOSE` value from the i18n service.
    	 */
    	@Input() closeLabel = this.i18n.get().MODAL.CLOSE;

    	/**
    	 * To emit the event of clicking on the close icon within the modal.
    	 */
    	@Output() closeSelect = new EventEmitter();

    	get isExperimental() {
    		return this.experimental.isExperimental;
    	}

    	constructor(protected i18n: I18n, protected experimental: ExperimentalService) {}

    	/**
    	 * Handles click for the close icon button within the `Modal`.
    	 */
    	public onClose() {
    		this.closeSelect.emit();
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""