Tabs

The Tabs components switch between peer views inside one context. Use ngs-tab-group with ngs-tab for local content tabs, or ngs-tab-nav-bar with a[ngs-tab-link] and ngs-tab-nav-panel for route-linked tabs inside one section.

Key Features:

Peer views: Switch between related sections such as overview, activity, files, and settings.
Custom labels: Use simple text or label templates with icons and richer header content.
Navigation support: Use tab nav links for route-linked subsections, not primary app navigation.
Overflow and motion: Supports disabled tabs, pagination controls, header placement, and animations.

ngs-tab-group

Prop	Type	Default
selectedIndex The index of the active tab	number	0
headerPosition Whether the tab header should be positioned above or below the tab content	'above' \| 'below'	'above'
stretchTabs Whether tabs should be stretched to fill the available width	boolean	true
alignTabs Alignment of the tab labels	'start' \| 'center' \| 'end'	'start'
animationDuration Duration for the tab-transition animation	string	'500ms'
disableRipple Whether ripples are disabled	boolean	false

Event	Description
selectedIndexChange	Output to enable support for two-way binding on selectedIndex
selectedTabChange	Event emitted when the tab selection has changed
focusChange	Event emitted when focus has changed within a tab group

ngs-tab

Prop	Type	Default
label Plain-text label for the tab	string	''
disabled Whether the tab is disabled	boolean	false

ngs-tab-nav-bar

Prop	Type	Default
tabPanel The nav panel that the nav bar should control	TabNavPanel \| null	null
disableRipple Whether ripples are disabled	boolean	false

a[ngs-tab-link]

Prop	Type	Default
disabled Whether the link is disabled	boolean	false
rippleDisabled Whether ripples are disabled on this link	boolean	false

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.