API reference for Angular Material tabs
import {MatTabsModule} from '@angular/material/tabs';
Directives
MatTab
Selector: mat-tab
Exported as: matTabProperties
Name | Description |
---|---|
@Input('aria-label')
|
Aria label for the tab. |
@Input('aria-labelledby')
|
Reference to the element that the tab is labelled by.
Will be cleared if |
@Input()
|
Whether the component is disabled. |
@Input('label')
|
Plain text label for the tab, used when there is no template label. |
|
Whether the tab is currently active. |
|
The initial relatively index origin of the tab if it was created and selected after there was already a selected tab. Provides context of what position the tab should originate from. |
|
The relatively indexed position where 0 represents the center, negative is left, and positive represents the right. |
|
Content for the tab label given by |
MatTabLabel
extends
CdkPortal
Used to flag tab labels for use with the portal directive
Selector: [mat-tab-label] [matTabLabel]
Properties
Name | Description |
---|---|
|
Contextual data to be passed in to the embedded view. |
|
Whether this portal is attached to a host. |
|
|
|
The embedded template that will be used to instantiate an embedded View in the host. |
|
Reference to the ViewContainer into which the template will be stamped out. |
Methods
attach | |
---|---|
Attach the portal to the provided |
|
Parameters | |
host PortalOutlet
|
|
context C = this.context
|
|
Returns | |
EmbeddedViewRef<C>
|
|
detach |
---|
setAttachedHost | |
---|---|
Sets the PortalOutlet reference without performing |
|
Parameters | |
host PortalOutlet
|
|
MatTabNav
Navigation component matching the styles of the tab group header. Provides anchored navigation with animated ink bar.
Selector: [mat-tab-nav-bar]
Exported as: matTabNavBar, matTabNavProperties
Name | Description |
---|---|
@Input()
|
Background color of the tab nav. |
@Input()
|
Theme color of the nav bar. |
@Input()
|
|
@Input()
|
Whether the ripple effect is disabled or not. |
|
|
|
|
|
|
|
|
|
Methods
updateActiveLink | |
---|---|
Notifies the component that the active link has been changed. |
|
Parameters | |
_element? ElementRef<any>
|
|
updatePagination |
---|
MatTabLink
Link inside of a mat-tab-nav-bar
.
Selector: [mat-tab-link] [matTabLink]
Exported as: matTabLinkProperties
Name | Description |
---|---|
@Input()
|
Whether the link is active. |
@Input()
|
Whether ripples are disabled. |
@Input()
|
Whether the component is disabled. |
|
Tabindex to which to fall back to if no value is set. |
Methods
focus | |
---|---|
Focuses the tab link. |
MatTabContent
Decorates the ng-template
tags and reads out the template from it.
Selector: [matTabContent]
Properties
Name | Description |
---|---|
|
Content for the tab. |
MatTabGroup
Material design tab-group component. Supports basic tab pairs (label + content) and includes animated ink-bar, keyboard navigation, and screen reader. See: https://material.io/design/components/tabs.html
Selector: mat-tab-group
Exported as: matTabGroupProperties
Name | Description |
---|---|
@Input()
|
Duration for the tab animation. Will be normalized to milliseconds if no units are set. |
@Input()
|
Background color of the tab group. |
@Input()
|
Theme color palette for the component. |
@Input()
|
Whether pagination should be disabled. This can be used to avoid unnecessary layout recalculations if it's known that pagination won't be required. |
@Input()
|
Whether ripples are disabled. |
@Input()
|
Whether the tab group should grow to the size of the active tab. |
@Input()
|
Position of the tab header. |
@Input()
|
The index of the active tab. |
@Output()
|
Event emitted when the body animation has completed |
@Output()
|
Event emitted when focus has changed within a tab group. |
@Output()
|
Output to enable support for two-way binding on |
@Output()
|
Event emitted when the tab selection has changed. |
|
Default color to fall back to if no value is set. |
Methods
realignInkBar | |
---|---|
Re-aligns the ink bar to the selected tab element. |
Classes
MatTabChangeEvent
A simple change event emitted on focus or selection changes.
Properties
Name | Description |
---|---|
|
Index of the currently-selected tab. |
|
Reference to the currently-selected tab. |
Interfaces
MatTabsConfig
Object that can be used to configure the default options for the tabs module.
Properties
Name | Description |
---|---|
|
Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). |
|
Whether pagination should be disabled. This can be used to avoid unnecessary layout recalculations if it's known that pagination won't be required. |
|
Whether the ink bar should fit its width to the size of the tab label content. This only applies to the MDC-based tabs. |
Type aliases
MatTabBodyOriginState
The origin state is an internally used state that is set on a new tab body indicating if it began to the left or right of the prior selected index. For example, if the selected index was set to 1, and a new tab is created and selected at index 2, then the tab body would have an origin of right because its index was greater than the prior selected index.
type MatTabBodyOriginState = 'left' | 'right';
MatTabBodyPositionState
These position states are used internally as animation states for the tab body. Setting the position state to left, right, or center will transition the tab body from its current position to its respective state. If there is not current position (void, in the case of a new tab body), then there will be no transition animation to its state.
In the case of a new tab body that should immediately be centered with an animating transition, then left-origin-center or right-origin-center can be used, which will use left or right as its psuedo-prior state.
type MatTabBodyPositionState = 'left' | 'center' | 'right' | 'left-origin-center' | 'right-origin-center';
ScrollDirection
The directions that scrolling can go in when the header's tabs exceed the header width. 'After' will scroll the header towards the end of the tabs list and 'before' will scroll towards the beginning of the list.
type ScrollDirection = 'after' | 'before';
MatTabHeaderPosition
Possible positions for the tab header.
type MatTabHeaderPosition = 'above' | 'below';
Constants
MAT_TABS_CONFIG
Injection token that can be used to provide the default options the tabs module.
const MAT_TABS_CONFIG: InjectionToken<MatTabsConfig>;
API reference for Angular Material tabs-testing
import {MatTabGroupHarness} from '@angular/material/tabs/testing';
Classes
MatTabGroupHarness
extends
ComponentHarness
Harness for interacting with a standard mat-tab-group in tests.
Methods
async
getSelectedTab
|
|
---|---|
Gets the selected tab of the tab group. |
|
Returns | |
Promise<MatTabHarness>
|
|
async
getTabs
|
|
---|---|
Gets the list of tabs in the tab group. |
|
Parameters | |
filter TabHarnessFilters = {}
|
Optionally filters which tabs are included. |
Returns | |
Promise<MatTabHarness[]>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
selectTab
|
|
---|---|
Selects a tab in this tab group. |
|
Parameters | |
filter TabHarnessFilters = {}
|
An optional filter to apply to the child tabs. The first tab matching the filter will be selected. |
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
MatTabHarness
extends
ComponentHarness
Harness for interacting with a standard Angular Material tab-label in tests.
Methods
async
getAriaLabel
|
|
---|---|
Gets the aria-label of the tab. |
|
Returns | |
Promise<string | null>
|
|
async
getAriaLabelledby
|
|
---|---|
Gets the value of the "aria-labelledby" attribute. |
|
Returns | |
Promise<string | null>
|
|
async
getHarnessLoaderForContent
|
|
---|---|
Gets a |
|
Returns | |
Promise<HarnessLoader>
|
|
async
getLabel
|
|
---|---|
Gets the label of the tab. |
|
Returns | |
Promise<string>
|
|
async
getTextContent
|
|
---|---|
Gets the text content of the tab. |
|
Returns | |
Promise<string>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isDisabled
|
|
---|---|
Whether the tab is disabled. |
|
Returns | |
Promise<boolean>
|
|
async
isSelected
|
|
---|---|
Whether the tab is selected. |
|
Returns | |
Promise<boolean>
|
|
async
select
|
|
---|---|
Selects the given tab by clicking on the label. Tab cannot be selected if disabled. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
Interfaces
TabHarnessFilters
A set of criteria that can be used to filter a list of MatRadioButtonHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances whose label matches the given value. |
TabGroupHarnessFilters
A set of criteria that can be used to filter a list of MatRadioButtonHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances whose selected tab label matches the given value. |