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.

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.