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

Getting Started

Avatar
Card
Drawerupdated
ExpansionPanel
GridLayout
PanelBar
Splitter
StackLayout
Stepper
TabStrip
TileLayout

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

Sample Applications

Troubleshooting

Components / Layout / API / TabStripComponent /

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

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`		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

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.

Getting Started

Support Resources

Community

Telerik and Kendo UI are part of Progress product portfolio. Progress is the leading provider of application development and digital experience technologies.

Copyright © 2022, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved. Progress, Telerik, Ipswitch, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.

DO NOT SELL MY PERSONAL INFORMATION