Tabs

Autocomplete
Badge
Bottom Sheet
Button
Button toggle
Card
Checkbox
Chips
Datepicker
Dialog
Divider
Expansion Panel
Form field
Grid list
Icon
Input
List
Menu
Paginator
Progress bar
Progress spinner
Radio button
Ripples
Select
Sidenav
Slide toggle
Slider
Snackbar
Sort header
Stepper
Table
Tabs
Toolbar
Tooltip
Tree
API for tabs

API reference for Angular Material tabs

import {MatTabsModule} from '@angular/material/tabs';

Selector: mat-tab

Exported as: matTab
Properties
Name Description
@Input('aria-label')

ariaLabel: string

Aria label for the tab.
@Input('aria-labelledby')

ariaLabelledby: string

Reference to the element that the tab is labelled by. Will be cleared if aria-label is set at the same time.
@Input()

disabled: boolean

Whether the component is disabled.
@Input('label')

textLabel: string

Plain text label for the tab, used when there is no template label.

isActive: false

Whether the tab is currently active.

origin: number | null

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.

position: number | null

The relatively indexed position where 0 represents the center, negative is left, and positive represents the right.

templateLabel: MatTabLabel

Content for the tab label given by <ng-template mat-tab-label>.

Used to flag tab labels for use with the portal directive

Selector: [mat-tab-label] [matTabLabel]

Properties
Name Description

context: C | undefined

Contextual data to be passed in to the embedded view.

isAttached: boolean

Whether this portal is attached to a host.

origin: ElementRef

templateRef: TemplateRef<C>

The embedded template that will be used to instantiate an embedded View in the host.

viewContainerRef: ViewContainerRef

Reference to the ViewContainer into which the template will be stamped out.
Methods
attach

Attach the portal to the provided PortalOutlet. When a context is provided it will override the context property of the TemplatePortal instance.
Parameters

host

PortalOutlet

context

C = this.context

Returns
EmbeddedViewRef<C>

detach
setAttachedHost

Sets the PortalOutlet reference without performing attach(). This is used directly by the PortalOutlet when it is performing an attach() or detach().
Parameters

host

PortalOutlet

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
Properties
Name Description
@Input()

backgroundColor: ThemePalette

Background color of the tab nav.
@Input()

color: ThemePalette

Theme color of the nav bar.
@Input()

disablePagination: boolean

@Input()

disableRipple: any

Whether the ripple effect is disabled or not.

focusIndex: number

indexFocused: EventEmitter<number>

scrollDistance: number

selectFocusedIndex: EventEmitter<number>

selectedIndex: number

Methods
updateActiveLink

Notifies the component that the active link has been changed.
Parameters

_element?

ElementRef<any>

updatePagination

Link inside of a mat-tab-nav-bar.

Selector: [mat-tab-link] [matTabLink]

Exported as: matTabLink
Properties
Name Description
@Input()

active: boolean

Whether the link is active.
@Input()

disableRipple: boolean

Whether ripples are disabled.
@Input()

disabled: boolean

Whether the component is disabled.

defaultTabIndex: number

Tabindex to which to fall back to if no value is set.
Methods
focus

Focuses the tab link.

Decorates the ng-template tags and reads out the template from it.

Selector: [matTabContent]

Properties
Name Description

template: TemplateRef<any>

Content for the tab.

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
Properties
Name Description
@Input()

animationDuration: string

Duration for the tab animation. Will be normalized to milliseconds if no units are set.
@Input()

backgroundColor: ThemePalette

Background color of the tab group.
@Input()

color: ThemePalette

Theme color palette for the component.
@Input()

disablePagination: boolean

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()

disableRipple: boolean

Whether ripples are disabled.
@Input()

dynamicHeight: boolean

Whether the tab group should grow to the size of the active tab.
@Input()

headerPosition: MatTabHeaderPosition

Position of the tab header.
@Input()

selectedIndex: number | null

The index of the active tab.
@Output()

animationDone: EventEmitter<void>

Event emitted when the body animation has completed
@Output()

focusChange: EventEmitter<MatTabChangeEvent>

Event emitted when focus has changed within a tab group.
@Output()

selectedIndexChange: EventEmitter<number>

Output to enable support for two-way binding on [(selectedIndex)]
@Output()

selectedTabChange: EventEmitter<MatTabChangeEvent>

Event emitted when the tab selection has changed.

defaultColor: ThemePalette | undefined

Default color to fall back to if no value is set.
Methods
realignInkBar

Re-aligns the ink bar to the selected tab element.

A simple change event emitted on focus or selection changes.

Properties
Name Description

index: number

Index of the currently-selected tab.

tab: MatTab

Reference to the currently-selected tab.

Object that can be used to configure the default options for the tabs module.

Properties
Name Description

animationDuration: string

Duration for the tab animation. Must be a valid CSS value (e.g. 600ms).

disablePagination: boolean

Whether pagination should be disabled. This can be used to avoid unnecessary layout recalculations if it's known that pagination won't be required.

fitInkBarToContent: boolean

Whether the ink bar should fit its width to the size of the tab label content. This only applies to the MDC-based tabs.

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';

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';

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';

Possible positions for the tab header.

type MatTabHeaderPosition = 'above' | 'below';

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';

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 Promise for the TestElement representing the host element of the component.
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.

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 HarnessLoader that can be used to load harnesses for components within the tab's content area.
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 Promise for the TestElement representing the host element of the component.
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.

A set of criteria that can be used to filter a list of MatRadioButtonHarness instances.

Properties
Name Description

label: string | RegExp

Only find instances whose label matches the given value.

A set of criteria that can be used to filter a list of MatRadioButtonHarness instances.

Properties
Name Description

selectedTabLabel: string | RegExp

Only find instances whose selected tab label matches the given value.
Tabs
Testing