import {MatTabsModule} from '@angular/material/tabs';
MatTab
Selector: mat-tab
Exported as: matTab| 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]
| 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. |
| attach | |
|---|---|
|
Attach the portal to the provided |
|
| Parameters | |
|
host PortalOutlet
|
|
|
context C = this.context
|
|
| Returns | |
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, matTabNav| Name | Description |
|---|---|
@Input()
|
Background color of the tab nav. |
@Input()
|
Theme color palette for the component. |
@Input()
|
Whether ripples are disabled. |
| updateActiveLink | |
|---|---|
|
Notifies the component that the active link has been changed. |
|
| Parameters | |
|
element ElementRef<any>
|
|
MatTabLink
Link inside of a mat-tab-nav-bar.
Selector: [mat-tab-link] [matTabLink]
Exported as: matTabLink| Name | Description |
|---|---|
@Input()
|
Whether the link is active. |
@Input()
|
Whether ripples are disabled. |
@Input()
|
Whether the component is disabled. |
MatTabContent
Decorates the ng-template tags and reads out the template from it.
Selector: [matTabContent]
| Name | Description |
|---|---|
|
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: matTabGroup| 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 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. |
| realignInkBar | |
|---|---|
|
Re-aligns the ink bar to the selected tab element. |
MatTabChangeEvent
A simple change event emitted on focus or selection changes.
| Name | Description |
|---|---|
|
Index of the currently-selected tab. |
|
Reference to the currently-selected tab. |
MatTabsConfig
Object that can be used to configure the default options for the tabs module.
| Name | Description |
|---|---|
|
Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). |
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';
MAT_TABS_CONFIG
Injection token that can be used to provide the default options the tabs module.
const MAT_TABS_CONFIG: InjectionToken<{}>;