carbon-components-angular

<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>carbon-components-angular documentation</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="../images/favicon.ico"> <link rel="stylesheet" href="../styles/style.css"> <link rel="stylesheet" href="../styles/dark.css"> <style> footer.carbon { position: absolute; bottom: 0; width: 100%; z-index: 9999; } #root > div { /* * Subtracting the height of the footer to prevent * overlaying the footer ontop of content */ height: calc(100vh - 48px); } </style> </head> <body> <script> // Blocking script to avoid flickering dark mode // Dark mode toggle button var useDark = window.matchMedia('(prefers-color-scheme: dark)'); var darkModeState = useDark.matches; var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input'); var $darkModeToggles = document.querySelectorAll('.dark-mode-switch'); var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state'); function checkToggle(check) { for (var i = 0; i < $darkModeToggleSwitchers.length; i++) { $darkModeToggleSwitchers[i].checked = check; } } function toggleDarkMode(state) { if (window.localStorage) { localStorage.setItem('compodoc_darkmode-state', state); } checkToggle(state); const hasClass = document.body.classList.contains('dark'); if (state) { for (var i = 0; i < $darkModeToggles.length; i++) { $darkModeToggles[i].classList.add('dark'); } if (!hasClass) { document.body.classList.add('dark'); } } else { for (var i = 0; i < $darkModeToggles.length; i++) { $darkModeToggles[i].classList.remove('dark'); } if (hasClass) { document.body.classList.remove('dark'); } } } useDark.addEventListener('change', function (evt) { toggleDarkMode(evt.matches); }); if (darkModeStateLocal) { darkModeState = darkModeStateLocal === 'true'; } toggleDarkMode(darkModeState); </script> <div class="navbar navbar-default navbar-fixed-top d-md-none p-0"> <div class="d-flex"> <a href="../" class="navbar-brand">carbon-components-angular documentation</a> <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button> </div> </div> <div class="xs-menu menu" id="mobile-menu"> <div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu> </div> <div class="container-fluid main"> <div class="row main"> <div class="d-none d-md-block menu"> <compodoc-menu mode="normal"></compodoc-menu> </div>  <div class="content component"> <div class="content-data"> <ol class="breadcrumb"> <li class="breadcrumb-item">Components</li> <li class="breadcrumb-item" > TabHeaderComponent</li> </ol> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a href="#info" class="nav-link active" role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a> </li> <li class="nav-item"> <a href="#source" class="nav-link" role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a> </li> <li class="nav-item"> <a href="#tree" class="nav-link" role="tab" id="tree-tab" data-bs-toggle="tab" data-link="dom-tree">DOM Tree</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade active in" id="info"><p class="comment"> <h3>File</h3> </p> <p class="comment"> <code>src/tabs/tab-header.component.ts</code> </p> <p class="comment"> <h3>Description</h3> </p> <p class="comment"> <p>Tab header with template for label, optional icon, secondary label, badge, and dismissable close.</p> <b>Example :</b><div><pre class="line-numbers"><code class="language-html"><cds-tab-header-group> <cds-tab-header [paneReference]="c1">Dashboard</cds-tab-header> <cds-tab-header [paneReference]="c2" [icon]="iconTpl" secondaryLabel="(1/4)"> Monitoring </cds-tab-header> </cds-tab-header-group> <cds-tab #c1>...</cds-tab> <cds-tab #c2>...</cds-tab></code></pre></div> </p> <p class="comment"> <h3>Extends</h3> </p> <p class="comment"> <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </p> <p class="comment"> <h3>Implements</h3> </p> <p class="comment"> <code>AfterViewInit</code> </p> <section data-compodoc="block-metadata"> <h3>Metadata</h3> <table class="table table-sm table-hover metadata"> <tbody> <tr> <td class="col-md-3">providers</td> <td class="col-md-9"> <code>{ provide: TabHeaderBase, useExisting: forwardRef(() => TabHeaderComponent) }</code> </td> </tr> <tr> <td class="col-md-3">selector</td> <td class="col-md-9"><code>cds-tab-header, ibm-tab-header</code></td> </tr> <tr> <td class="col-md-3">template</td> <td class="col-md-9"><pre class="line-numbers"><code class="language-html"><cds-tooltip *ngIf="iconOnly; else plainButton" align="bottom" [autoAlign]="true" class="cds--icon-tooltip" [description]="iconLabel" [enterDelayMs]="enterDelayMs" [leaveDelayMs]="leaveDelayMs" [isOpen]="isTooltipOpen" [disabled]="disabled"> <ng-container *ngTemplateOutlet="tabButtonTemplate"></ng-container> </cds-tooltip> <ng-template #plainButton> <ng-container *ngTemplateOutlet="tabButtonTemplate"></ng-container> </ng-template> <ng-template #tabButtonTemplate> <button #tabButton type="button" role="tab" class="cds--tabs__nav-item cds--tabs__nav-link" [ngClass]="{ 'cds--tabs__nav-item--selected': active, 'cds--tabs__nav-item--disabled': disabled, 'cds--tabs__nav-item--icon-only': iconOnly, 'cds--tabs__nav-item--icon-only__20': iconOnly && iconSize === 'lg' }" [attr.aria-selected]="active" [attr.aria-disabled]="disabled" [attr.aria-controls]="paneReference?.id || null" [attr.aria-label]="iconOnly ? iconLabel : null" [attr.tabindex]="active ? 0 : -1" [attr.title]="resolvedTitle" [disabled]="disabled" (click)="onTabButtonClick()" (keydown)="onTabButtonKeyDown($event)"> <ng-container *ngIf="iconOnly; else labeledTab"> <ng-container [ngTemplateOutlet]="icon"></ng-container> <span *ngIf="!disabled && badgeIndicator" class="cds--badge-indicator" aria-hidden="true"> </span> </ng-container> <ng-template #labeledTab> <div class="cds--tabs__nav-item-label-wrapper"> <div *ngIf="dismissable && icon" class="cds--tabs__nav-item--icon-left"> <ng-container [ngTemplateOutlet]="icon"></ng-container> </div> <span class="cds--tabs__nav-item-label"> <ng-content></ng-content> </span> <div *ngIf="!dismissable && icon" class="cds--tabs__nav-item--icon"> <ng-container [ngTemplateOutlet]="icon"></ng-container> </div> </div> <div *ngIf="secondaryLabel" class="cds--tabs__nav-item-secondary-label" [attr.title]="secondaryLabel"> {{ secondaryLabel }} </div> </ng-template> </button> </ng-template> <div *ngIf="dismissable" class="cds--tabs__nav-item--close"> <button type="button" class="cds--tabs__nav-item--close-icon" [attr.tabindex]="-1" [attr.aria-disabled]="disabled" [attr.aria-hidden]="!(active && !disabled)" [ngClass]="{ 'cds--tabs__nav-item--close-icon--selected': active, 'cds--tabs__nav-item--close-icon--disabled': disabled }" [disabled]="disabled" [attr.title]="closeButtonTitle" (click)="onClose($event)"> <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" [attr.aria-label]="closeButtonAriaLabel" [attr.aria-hidden]="!(active && !disabled)"> <path d="M17.4141 16L24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"></path> </svg> </button> </div> </code></pre></td> </tr> </tbody> </table> </section> <section data-compodoc="block-index"> <h3 id="index">Index</h3> <table class="table table-sm table-bordered index-table"> <tbody> <tr> <td class="col-md-4"> <h6><b>Properties</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <span class="modifier"></span> <a href="#displayContents" >displayContents</a> </li> <li> <span class="modifier"></span> <a href="#tabButton" >tabButton</a> </li> <li> <span class="modifier">Protected</span> <a href="#_cacheActive" >_cacheActive</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>Methods</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#focus" >focus</a> </li> <li> <a href="#ngAfterViewInit" >ngAfterViewInit</a> </li> <li> <a href="#onClose" >onClose</a> </li> <li> <a href="#onTabButtonClick" >onTabButtonClick</a> </li> <li> <a href="#onTabButtonKeyDown" >onTabButtonKeyDown</a> </li> <li> <a href="#selectTab" >selectTab</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>Inputs</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#badgeIndicator" >badgeIndicator</a> </li> <li> <a href="#closeButtonAriaLabel" >closeButtonAriaLabel</a> </li> <li> <a href="#enterDelayMs" >enterDelayMs</a> </li> <li> <a href="#iconLabel" >iconLabel</a> </li> <li> <a href="#iconOnly" >iconOnly</a> </li> <li> <a href="#iconSize" >iconSize</a> </li> <li> <a href="#isTooltipOpen" >isTooltipOpen</a> </li> <li> <a href="#leaveDelayMs" >leaveDelayMs</a> </li> <li> <a href="#active" >active</a> </li> <li> <a href="#cacheActive" >cacheActive</a> </li> <li> <a href="#disabled" >disabled</a> </li> <li> <a href="#dismissable" >dismissable</a> </li> <li> <a href="#icon" >icon</a> </li> <li> <a href="#paneReference" >paneReference</a> </li> <li> <a href="#paneTabIndex" >paneTabIndex</a> </li> <li> <a href="#secondaryLabel" >secondaryLabel</a> </li> <li> <a href="#title" >title</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>Outputs</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#selected" >selected</a> </li> <li> <a href="#tabClose" >tabClose</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>HostBindings</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#style.display" >style.display</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>Accessors</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#resolvedTitle" >resolvedTitle</a> </li> <li> <a href="#closeButtonTitle" >closeButtonTitle</a> </li> </ul> </td> </tr> </tbody> </table> </section> <section data-compodoc="block-inputs"> <h3 id="inputs">Inputs</h3> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="badgeIndicator"></a> <b>badgeIndicator</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/tabs/tab-header.component.ts:141</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p><strong>Preview</strong>: Icon-only tabs — show a notification dot on the icon.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="closeButtonAriaLabel"></a> <b>closeButtonAriaLabel</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>"Press delete to remove tab"</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="149" class="link-to-prism">src/tabs/tab-header.component.ts:149</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p><code>aria-label</code> for the dismissable close button.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="enterDelayMs"></a> <b>enterDelayMs</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="153" class="link-to-prism">src/tabs/tab-header.component.ts:153</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Icon-only tabs: tooltip show delay (ms).</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="iconLabel"></a> <b>iconLabel</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/tabs/tab-header.component.ts:137</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Icon-only tabs: accessible name (<code>aria-label</code> / <code>title</code>).</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="iconOnly"></a> <b>iconOnly</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/tabs/tab-header.component.ts:133</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Icon-only tab: set <code>icon</code> and <code>iconLabel</code>.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="iconSize"></a> <b>iconSize</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code>"default" | "lg"</code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>"default"</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="145" class="link-to-prism">src/tabs/tab-header.component.ts:145</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Icon-only tabs: icon size <code>default</code> (16px) or <code>lg</code> (20px); usually set on the parent group.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="isTooltipOpen"></a> <b>isTooltipOpen</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="161" class="link-to-prism">src/tabs/tab-header.component.ts:161</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Icon-only tabs: open the tooltip on first render.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="leaveDelayMs"></a> <b>leaveDelayMs</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="157" class="link-to-prism">src/tabs/tab-header.component.ts:157</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Icon-only tabs: tooltip hide delay (ms).</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="active"></a> <b>active</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-4" colspan="2"> <div class="io-line">Inherited from <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </div> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <code><a href="../directives/TabHeaderBase.html#source" target="_self" >TabHeaderBase:53</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Selected tab; controls whether the linked pane content is shown.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="cacheActive"></a> <b>cacheActive</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4" colspan="2"> <div class="io-line">Inherited from <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </div> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <code><a href="../directives/TabHeaderBase.html#source" target="_self" >TabHeaderBase:28</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Set to 'true' to have pane reference cached and not reloaded on tab switching.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="disabled"></a> <b>disabled</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-4" colspan="2"> <div class="io-line">Inherited from <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </div> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <code><a href="../directives/TabHeaderBase.html#source" target="_self" >TabHeaderBase:58</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Indicates whether or not the <code>Tab</code> item is disabled.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="dismissable"></a> <b>dismissable</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-4" colspan="2"> <div class="io-line">Inherited from <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </div> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <code><a href="../directives/TabHeaderBase.html#source" target="_self" >TabHeaderBase:74</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Set to <code>true</code> to render this tab header as dismissable.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="icon"></a> <b>icon</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code>TemplateRef<any></code> </td> </tr> <tr> <td class="col-md-4" colspan="2"> <div class="io-line">Inherited from <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </div> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <code><a href="../directives/TabHeaderBase.html#source" target="_self" >TabHeaderBase:63</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Icon template; used with <code>cds-tab-header</code> / <code>cds-tab-header-group</code>.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="paneReference"></a> <b>paneReference</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="../components/Tab.html" target="_self" >Tab</a></code> </td> </tr> <tr> <td class="col-md-4" colspan="2"> <div class="io-line">Inherited from <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </div> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <code><a href="../directives/TabHeaderBase.html#source" target="_self" >TabHeaderBase:79</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Reference to the corresponding tab pane.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="paneTabIndex"></a> <b>paneTabIndex</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code>number | null</code> </td> </tr> <tr> <td class="col-md-4" colspan="2"> <div class="io-line">Inherited from <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </div> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <code><a href="../directives/TabHeaderBase.html#source" target="_self" >TabHeaderBase:44</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Sets <code>tabIndex</code> on the linked <code>Tab</code> pane when the pane reference is set.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="secondaryLabel"></a> <b>secondaryLabel</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-4" colspan="2"> <div class="io-line">Inherited from <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </div> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <code><a href="../directives/TabHeaderBase.html#source" target="_self" >TabHeaderBase:69</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Optional secondary label rendered below the primary tab label. Only displayed when the parent group is using <code>type="contained"</code>.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="title"></a> <b>title</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-4" colspan="2"> <div class="io-line">Inherited from <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </div> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <code><a href="../directives/TabHeaderBase.html#source" target="_self" >TabHeaderBase:84</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Title attribute used as the tooltip for the tab item. Falls back to the tab item's text content if not provided.</p> </div> </td> </tr> </tbody> </table> </section> <section data-compodoc="block-outputs"> <h3 id="outputs">Outputs</h3> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="selected"></a> <b>selected</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code>EventEmitter</code> </td> </tr> <tr> <td class="col-md-4" colspan="2"> <div class="io-line">Inherited from <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </div> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <code><a href="../directives/TabHeaderBase.html#source" target="_self" >TabHeaderBase:89</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Emits when this header becomes selected.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="tabClose"></a> <b>tabClose</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code>EventEmitter</code> </td> </tr> <tr> <td class="col-md-4" colspan="2"> <div class="io-line">Inherited from <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </div> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <code><a href="../directives/TabHeaderBase.html#source" target="_self" >TabHeaderBase:94</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Emits when this tabs's close button is pressed.</p> </div> </td> </tr> </tbody> </table> </section> <section data-compodoc="block-properties"> <h3>HostBindings</h3> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="style.display"></a> <span class="name"> <span ><b>style.display</b></span> <a href="#style.display"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>"contents"</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="163" class="link-to-prism">src/tabs/tab-header.component.ts:163</a></div> </td> </tr> </tbody> </table> </section> <section data-compodoc="block-methods"> <h3 id="methods"> Methods </h3> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="focus"></a> <span class="name"> <span ><b>focus</b></span> <a href="#focus"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <code>focus()</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Inherited from <code><a href="../directives/TabHeaderBase.html" target="_self" >TabHeaderBase</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <code><a href="../directives/TabHeaderBase.html#source" target="_self" >TabHeaderBase:183</a></code> </div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Focus the rendered tab button (not the host).</p> </div> <div class="io-description"> <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="ngAfterViewInit"></a> <span class="name"> <span ><b>ngAfterViewInit</b></span> <a href="#ngAfterViewInit"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <code>ngAfterViewInit()</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="167" class="link-to-prism">src/tabs/tab-header.component.ts:167</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"> <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="onClose"></a> <span class="name"> <span ><b>onClose</b></span> <a href="#onClose"