Separator

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

/** This example uses ng-primitives styles, which are imported from ng-primitives/example-theme/index.css in the global styles file **/
import { Component } from "@angular/core";
import { NgpSeparator } from "ng-primitives/separator";

@Component({
  selector: "app-root",
  imports: [NgpSeparator],
  template: `
    <p>The separator primitive can be used to separate content in a layout.</p>
    <div ngpSeparator></div>
    <p>It supports both horizontal and vertical orientations.</p>
  `,
  styles: `
    :host {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      max-width: 300px;
      background-color: var(--ngp-background);
      padding: 1rem;
      border-radius: 8px;
      box-shadow: var(--ngp-shadow);
      border: 1px solid var(--ngp-border);
    }

    p {
      color: var(--ngp-text-primary);
      margin: 0;
    }

    [ngpSeparator] {
      background-color: var(--ngp-border);
      height: 1px;
    }
  `,
})
export class AppComponent {}

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.

import { Component } from '@angular/core';
import { Separator } from './separator';

@Component({
  selector: 'app-root',
  imports: [Separator],
  template: `
    <div app-separator orientation="horizontal"></div>
  `,
})
export default class App {}

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.
• componentSuffix: The suffix to apply to the generated component class name.
• fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
• exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

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

NgpSeparator

• Selector: [ngpSeparator]
• Exported As: ngpSeparator

Data Attributes

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:

Adheres to the WAI-ARIA Separator Design Pattern.