### File

`src/tabs/tab.component.ts`

### Description

The `Tab` component is a child of the `Tabs` component. It represents one `Tab` item and its content within a panel of other `Tab` items.

`Tab` takes a string or `TemplateRef` for the header, and any content for the body of the tab. Disabled states should be handled by the application (ie. switch to the tab, but display some indication as to why the tab is disabled).

When the tab is selected the `select` output will be triggered. The `select` output will also be triggered for the active tab when the tabs are loaded or updated.

Tab with string header:

    * <ibm-tab heading='tab1'>
    *     tab 1 content
    * </ibm-tab>
    *

Tab with custom header:

    * <ng-template #tabHeading>
    *     <ibm-icon
    *         icon="facebook"
    *         size="sm"
    *         style="margin-right: 7px;">
    *     </ibm-icon>
    *     Hello Tab 1
    * </ng-template>
    * <ibm-tabs>
    *     <ibm-tab [heading]="tabHeading">
    *         Tab 1 content <ibm-icon icon="alert" size="lg"></ibm-icon>
    *     </ibm-tab>
    *     <ibm-tab heading='Tab2'>
    *         Tab 2 content
    *     </ibm-tab>
    *     <ibm-tab heading='Tab3'>
    *         Tab 3 content
    *     </ibm-tab>
    * </ibm-tabs>
    *

### Implements

`OnInit`

### Example

### Metadata

selector | `ibm-tab`

template

    <div
    	[tabindex]="tabIndex"
    	role="tabpanel"
    	*ngIf="shouldRender()"
    	[ngStyle]="{'display': active ? null : 'none'}"
    	[attr.aria-labelledby]="id + '-header'">
    	<ng-content></ng-content>
    </div>

### Index

###### Properties

- Public headingIsTemplate

###### Methods

- doSelect
- ngOnInit
- shouldRender

###### Inputs

- active
- cacheActive
- context
- disabled
- heading
- id
- tabIndex

###### Outputs

- selected

###### HostBindings

- attr.id

### Inputs

`active` | Indicates whether the `Tab` is active/selected. Determines whether it's `TabPanel` is rendered. Default value : `false`
Defined in src/tabs/tab.component.ts:98

`cacheActive` | Set to true to have Tab items cached and not reloaded on tab switching. Default value : `false`
Defined in src/tabs/tab.component.ts:113

`context` | Allows the user to pass data to the custom template for the `Tab` heading. Type : `any`
Defined in src/tabs/tab.component.ts:93

`disabled` | Indicates whether or not the `Tab` item is disabled. Default value : `false`
Defined in src/tabs/tab.component.ts:102

`heading` | The `Tab`'s title to be displayed or custom temaplate for the `Tab` heading. Type : `string | TemplateRef<any>`
Defined in src/tabs/tab.component.ts:89

`id` | Sets the id of the `Tab`. Will be uniquely generated if not provided. Default value : ``n-tab-${nextId++}``
Defined in src/tabs/tab.component.ts:109

`tabIndex` | Default value : `0`
Defined in src/tabs/tab.component.ts:104

### Outputs

`selected` | Value 'selected' to be emitted after a new `Tab` is selected. `$event` Type: `EventEmitter<void>`
Defined in src/tabs/tab.component.ts:118

### HostBindings

attr.id
`attr.id: ```
Default value : `this.id`
Defined in src/tabs/tab.component.ts:123
Used to set the id property on the element.

### Methods

doSelect
`doSelect()`
Defined in src/tabs/tab.component.ts:138
Emit the status of the `Tab`, specifically 'select' and 'selected' properties. Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/tabs/tab.component.ts:129
Checks for custom heading template on initialization and updates the value of the boolean 'headingIsTemplate'. Returns : `void`

shouldRender
`shouldRender()`
Defined in src/tabs/tab.component.ts:146
Returns value indicating whether this `Tab` should be rendered in a `TabPanel`. Returns : `boolean` boolean

### Properties

Public headingIsTemplate
`headingIsTemplate: ```
Default value : `false`
Defined in src/tabs/tab.component.ts:83
Boolean value reflects if the `Tab` is using a custom template for the heading. Default value is false.

    import {
    	Component,
    	OnInit,
    	Input,
    	Output,
    	EventEmitter,
    	ContentChild,
    	TemplateRef,
    	HostBinding
    } from "@angular/core";

    let nextId = 0;

    /**
    * The `Tab` component is a child of the `Tabs` component.
    * It represents one `Tab` item and its content within a panel of other `Tab` items.
    *
    *
    * `Tab` takes a string or `TemplateRef` for the header, and any content for the body of the tab.
    * Disabled states should be handled by the application (ie. switch to the tab, but display some
    * indication as to _why_ the tab is disabled).
    *
    * When the tab is selected the `select` output will be triggered.
    * The `select` output will also be triggered for the active tab when the tabs are loaded or updated.
    *
    *
    * Tab with string header:
    *
    * ```html
    * <ibm-tab heading='tab1'>
    * 	tab 1 content
    * </ibm-tab>
    * ```
    *
    * Tab with custom header:
    *
    * ```html
    * <ng-template #tabHeading>
    * 	<ibm-icon
    * 		icon="facebook"
    * 		size="sm"
    * 		style="margin-right: 7px;">
    * 	</ibm-icon>
    * 	Hello Tab 1
    * </ng-template>
    * <ibm-tabs>
    * 	<ibm-tab [heading]="tabHeading">
    * 		Tab 1 content <ibm-icon icon="alert" size="lg"></ibm-icon>
    * 	</ibm-tab>
    * 	<ibm-tab heading='Tab2'>
    * 		Tab 2 content
    * 	</ibm-tab>
    * 	<ibm-tab heading='Tab3'>
    * 		Tab 3 content
    * 	</ibm-tab>
    * </ibm-tabs>
    * ```
    *
    *
    * @export
    * @class Tab
    * @implements {OnInit}
    */
    @Component({
    	selector: "ibm-tab",
    	template: `
    		<div
    			[tabindex]="tabIndex"
    			role="tabpanel"
    			*ngIf="shouldRender()"
    			[ngStyle]="{'display': active ? null : 'none'}"
    			[attr.aria-labelledby]="id + '-header'">
    			<ng-content></ng-content>
    		</div>
    	 `
    })
    export class Tab implements OnInit {
    	/**
    	 * Boolean value reflects if the `Tab` is using a custom template for the heading.
    	 * Default value is false.
    	 */
    	public headingIsTemplate = false;

    	/**
    	 * The `Tab`'s title to be displayed or custom temaplate for the `Tab` heading.
    	 * @type {(string | TemplateRef<any>)}
    	 */
    	@Input() heading: string | TemplateRef<any>;
    	/**
    	 * Allows the user to pass data to the custom template for the `Tab` heading.
    	 */
    	@Input() context: any;
    	/**
    	 * Indicates whether the `Tab` is active/selected.
    	 * Determines whether it's `TabPanel` is rendered.
    	 */
    	@Input() active = false;
    	/**
    	 * Indicates whether or not the `Tab` item is disabled.
    	 */
    	@Input() disabled = false;

    	@Input() tabIndex = 0;
    	// do we need id's?
    	/**
    	 * Sets the id of the `Tab`. Will be uniquely generated if not provided.
    	 */
    	@Input() id = `n-tab-${nextId++}`;
    	/**
    	 * Set to true to have Tab items cached and not reloaded on tab switching.
    	 */
    	@Input() cacheActive = false;
    	/**
    	 * Value 'selected' to be emitted after a new `Tab` is selected.
    	 * @type {EventEmitter<void>}
    	 */
    	@Output() selected: EventEmitter<void> = new EventEmitter<void>();

    	/**
    	 * Used to set the id property on the element.
    	 */
    	@HostBinding("attr.id") attrClass = this.id;

    	/**
    	 * Checks for custom heading template on initialization and updates the value
    	 * of the boolean 'headingIsTemplate'.
    	 */
    	ngOnInit() {
    		if (this.heading instanceof TemplateRef) {
    			this.headingIsTemplate = true;
    		}
    	}

    	/**
    	 * Emit the status of the `Tab`, specifically 'select' and 'selected' properties.
    	 */
    	doSelect() {
    		this.selected.emit();
    	}

    	/**
     	* Returns value indicating whether this `Tab` should be rendered in a `TabPanel`.
     	* @returns boolean
     	*/
    	shouldRender() {
    		return this.active || this.cacheActive;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""