TabItemDirective

1 Oct 20251 minute to read

‘e-tabitem’ directive represent a item of the Angular Tab.
It must be contained in a Tab component(ejs-tab).

<ejs-tab>
 <e-tabitems>
  <e-tabitem [header]='Header 1' [content]='Content 1'></e-tabitem>
  <e-tabitem [header]='Header 2' [content]='Content 2'></e-tabitem>
 <e-tabitems>
</ejs-tab>

Properties

content string|object

Specifies the content of Tab item, that is displayed when concern item header is selected.

Defaults to ’’

cssClass any

Sets the CSS classes to the Tab item to customize its styles.

Defaults to ’’

disabled any

Sets true to disable user interactions of the Tab item.

Defaults to false

The object used for configuring the Tab item header properties.

Defaults to {}

headerTemplate string|object

Specifies the header text of Tab item.

Defaults to null

id any

Sets unique ID to Tab item.

Defaults to null

tabIndex any

Specifies the tab order of the Tabs items. When positive values assigned, it allows to switch focus to the next/previous tabs items with Tab/ShiftTab keys.
By default, user can able to switch between items only via arrow keys.
If the value is set to 0 for all tabs items, then tab switches based on element order.

Defaults to -1

visible any

Sets false to hide the Tab item.

Defaults to true