Tabs

Dynamically show and hide content based on an active tab.

Import

Import the Tabs primitives from ng-primitives/tabs.

import { NgpTabset, NgpTabList, NgpTabButton, NgpTabPanel } from 'ng-primitives/tabs';

Usage

Assemble the tabs directives in your template.

<div ngpTabset>
  <div ngpTabList>
    <button ngpTabButton ngpTabButtonValue="tab1">Tab 1</button>
    <button ngpTabButton ngpTabButtonValue="tab2">Tab 2</button>
    <button ngpTabButton ngpTabButtonValue="tab3">Tab 3</button>
  </div>
  <div ngpTabPanel ngpTabPanelValue="tab1">Tab 1 content</div>
  <div ngpTabPanel ngpTabPanelValue="tab2">Tab 2 content</div>
  <div ngpTabPanel ngpTabPanelValue="tab3">Tab 3 content</div>
</div>

Reusable Component

Create reusable components that uses the tab directives.

Schematics

Generate a reusable tab components using the Angular CLI.

ng g ng-primitives:primitive tabs

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• component-suffix: The suffix to apply to the generated component class name.
• file-suffix: The suffix to apply to the generated component file name. Defaults to component.
• styles: How component styles should be generated. css (default) includes the full example styles; unstyled omits them entirely so you can style the component yourself.
• example-styles (deprecated): still supported for compatibility - true maps to styles: css, false maps to styles: unstyled.

API Reference

The following directives are available to import from the ng-primitives/tabs package:

NgpTabset

NgpTabList

NgpTabButton

NgpTabPanel

Global Configuration

You can configure the default options for all tabs in your application by using the provideTabsConfig function in a providers array.

import { provideTabsConfig } from 'ng-primitives/tabs';

bootstrapApplication(AppComponent, {
  providers: [
    provideTabsConfig({
      orientation: 'horizontal',
      activateOnFocus: false,
      wrap: false,
    }),
  ],
});

NgpTabsConfig

The following options are available to configure the default tab options:

Accessibility

Adheres to the Tabs WAI-ARIA design pattern.

Keyboard Interactions

• ArrowLeft: Move focus to the previous tab (horizontal orientation).
• ArrowRight: Move focus to the next tab (horizontal orientation).
• ArrowUp: Move focus to the previous tab (vertical orientation).
• ArrowDown: Move focus to the next tab (vertical orientation).
• Home: Move focus to the first tab.
• End: Move focus to the last tab.