Tabs

Dynamically show and hide content based on an active tab.

Usage

Assemble the tabs directives in your template.

<div ngpTabs></div>

API Reference

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

NgpTabsDirective

There are no inputs or outputs for this directive.

Global Configuration

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

import { provideNgpTabsConfig } from '@ng-primitives/ng-primitives/tabs';

bootstrapApplication(AppComponent, {
  providers: [provideNgpTabsConfig({})],
});

NgpTabsConfig

Schematics

You can use our schematic to generate a new tabs component.

Angular CLI

ng generate @ng-primitives/ng-primitives:tabs

Options

name · string

The name of the component.

project · string

The name of the project to add the component to.

path · string

The path to create the component.