Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filterupdated
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Icons
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigationupdated
    • Notification
    • Pager
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesnew
    Styling & Themes
    Common Features
    Project Setup
    Troubleshooting
New to Kendo UI for Angular? Start a free 30-day trial

TabStripComponent

Represents the Kendo UI TabStrip component for Angular.

Selector

kendo-tabstrip

Export Name

Accessible in templates as #kendoTabStripInstance="kendoTabStrip"

Inputs

NameTypeDefaultDescription

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

Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the close button span element. Allows the usage of custom icons.

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.

tabAlignment

TabAlignment

Sets the alignment of the tabs.

tabPosition

TabPosition

'top'

Sets the position of the tabs. Defaults to top.

Fields

NameTypeDefaultDescription

tabs

QueryList<TabStripTabComponent>

A query list of all declared tabs.

Events

NameTypeDescription

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.