TabStripComponent

Represents the Kendo UI TabStrip component for Angular.

Selector

kendo-tabstrip

Export Name

Accessible in templates as #kendoTabStripInstance="kendoTabStrip"

Inputs

Name	Type	Default	Description
animate	boolean	true	Enables the tab animation.
closable	boolean	false	When set to true, a close button will be rendered inside each tab. By default, closable is false.
closeIcon	string		Defines the name for an existing font icon in the Kendo UI theme for the close icon.
closeIconClass	string		Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the close button.
closeSVGIcon	SVGIcon		Defines an SVGIcon to be rendered for the close icon. The input can take either an existing Kendo SVG icon or a custom one.
height	string		Sets the height of the TabStrip.
keepTabContent	boolean	false	When set to true, the component renders all tabs and they are persisted in the DOM. By default, keepTabContent is false.
scrollable	boolean | TabStripScrollableSettings	false	Enables the scrolling of the tab list. When set to true and the total size of all tabs is greater than the size of the TabStrip container, scroll buttons will be rendered on each end of the tab list. By default, scrollable is false.
showContentArea	boolean	true	Determines whether the content associated with each tab will be rendered.
tabAlignment	TabAlignment		Sets the alignment of the tabs. @default: 'start'
tabPosition	TabPosition	'top'	Sets the position of the tabs. Defaults to top.

Fields

Name	Type	Default	Description
tabs	QueryList<TabStripTabComponent>		A query list of all declared tabs.

Events

Name	Type	Description
tabClose	EventEmitter<TabCloseEvent>	Fires each time the user closes a tab. The event data contains the index of the closed tab and its instance.
tabScroll	EventEmitter<TabScrollEvent>	Fires each time the user scrolls the TabStrip list. The event is preventable.
tabSelect	EventEmitter<SelectEvent>	Fires each time the user selects a tab (see example). The event data contains the index of the selected tab and its title.

Methods

selectTab
Allows the user to select a tab programmatically.
Parameters index number The index of the tab that will be selected.