Separator

The separator primitive allow you to semantically separate content either horizontally or vertically.

Import

Import the Separator primitives from ng-primitives/separator.

import { NgpSeparator } from 'ng-primitives/separator';

Usage

Assemble the separator directives in your template.

<div ngpSeparator></div>

Reusable Component

Create a reusable component that uses the NgpSeparator directive.

Schematics

Generate a reusable separator component using the Angular CLI.

ng g ng-primitives:primitive separator

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/separator package:

NgpSeparator

Global Configuration

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

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

bootstrapApplication(AppComponent, {
  providers: [
    provideSeparatorConfig({
      orientation: 'horizontal',
    }),
  ],
});

NgpSeparatorConfig

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

Accessibility

Adheres to the WAI-ARIA Separator Design Pattern.