Basic — $tabs
<base-tabs>
base-tabs renders labels only — its mat-tabs have no body, so the panel below is switched by the emitted value.
tabValueChange → "details" · tabIndexChange → 0
Award
Coastal Erosion Monitoring
Sponsor
National Science Foundation
Icons — baseIcon
IconPosition
Icons on either side of the label. position defaults to Right, and the active tab gets a selected class.
$1,240,000
$310,000 at 51%
None
Layout — $matStretchTabs
<mat-tab-group>
Stretch the labels across the width and pass a class straight to the mat-tab-group.
Award
Coastal Erosion Monitoring
Sponsor
National Science Foundation
Controlled — $selectedTabValue
tabValueChange
Driving selection by value rather than index — the index input has an || bug that breaks index 0.
Label template — $tabLabelTemplate
TemplateRef
Replaces the entire label, including the built-in tooltip and icon handling.
budget-justification.pdf
irb-approval.pdf
letters-of-support.pdf
Service — TabsService
TabsService.$showTabs
The app-level channel used by page-layout. hideAllTabs is global — it hides every base-tabs at once.
Tabs are visible. Hiding them affects every base-tabs on the page, including the examples above.