Divider

The <smart-divider> component provides a flexible divider/separator wrapper with an InjectionToken-based extension mechanism. It renders a default DividerStandardComponent which can be replaced via DIVIDER_STANDARD_COMPONENT_TOKEN.

Usage

<smart-divider
  [options]="options"
  [title]="title"
  [actionLabel]="actionLabel"
  (actionClick)="onAddMember()"
/>

Components

DividerComponent (<smart-divider>)

Main wrapper component. Renders DividerStandardComponent by default. When DIVIDER_STANDARD_COMPONENT_TOKEN is provided, renders the injected component via NgComponentOutlet.

DividerStandardComponent (<smart-divider-standard>)

Default concrete implementation. Renders a <div role="separator"> host with optional title, label, action button, or a plain <hr /> when none of these are provided.

DividerPresetComponent (<smart-divider-preset>)

Styled variation that extends DividerBaseComponent and is a drop-in replacement for DividerStandardComponent. Register it via DIVIDER_STANDARD_COMPONENT_TOKEN to restyle every <smart-divider>, or use the <smart-divider-preset> selector directly. It translates Preline's divider patterns to smart:-prefixed Tailwind (with explicit dark: variants): a plain <hr>, an inline label/iconName/title divider with connecting line(s) drawn left/center/right via options.position (default center), a centered actionLabel button, and a with-toolbar row (label + line + action). The visual is chosen by options.variant; when omitted it is inferred from the provided inputs (actionLabel → with-button, title → with-title, iconName → with-icon, label → with-label, otherwise plain <hr>). The with-title variant uses Preline's uppercase/muted "Or" treatment. Class recipes live in preset/preset-classes.util.ts (getContainerClasses, getActionClasses, getIconClasses, getPlainClasses, getToolbarClasses, getToolbarLineClasses).

Because DividerComponent renders injected components via NgComponentOutlet (which passes inputs by canonical name), DividerPresetComponent overrides cssClass as input<string>('') without the class alias. Bind it as [cssClass] when using the <smart-divider-preset> selector directly, or just pass class on <smart-divider> (the wrapper forwards it).

Note: iconName has no icon-font dependency here — it is rendered as the text content of a size-4 icon slot, so consumers wiring an icon font (e.g. Material Icons) get the correct sizing.

DividerBaseComponent (abstract)

Abstract base directive for extending custom divider implementations.

API

Inputs

Outputs

DIVIDER_STANDARD_COMPONENT_TOKEN

InjectionToken that allows replacing the default DividerStandardComponent with a custom implementation. Provide a Type<DividerBaseComponent> to override.

Extending the base class

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
  ViewEncapsulation,
} from '@angular/core';

import {
  DividerBaseComponent,
  DividerComponent,
  DIVIDER_STANDARD_COMPONENT_TOKEN,
  IDividerOptions,
} from '@smartsoft001/angular';

/**
 * A custom divider built on `DividerBaseComponent`.
 *
 * The base contributes the `label`, `iconName`, `title`, `actionLabel`,
 * `options` and `class` inputs plus the `actionClick` output. Which of them an
 * implementation honours is up to its template.
 */
@Component({
  selector: 'docs-custom-divider',
  template: `
    <div role="separator" [class]="containerClasses()">
      @if (title()) {
        <h3 class="docs-divider__title">{{ title() }}</h3>
      } @else if (label()) {
        <span class="docs-divider__label">{{ label() }}</span>
      }
      @if (actionLabel()) {
        <button type="button" (click)="actionClick.emit()">
          {{ actionLabel() }}
        </button>
      }
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomDividerComponent extends DividerBaseComponent {
  // The wrapper hands inputs to NgComponentOutlet by canonical name, so the
  // consumer's class arrives as `cssClass` rather than through the alias.
  override cssClass = input<string>('');

  containerClasses = computed(() =>
    ['docs-divider', this.cssClass()].filter(Boolean).join(' '),
  );
}

/**
 * Registering the implementation against `DIVIDER_STANDARD_COMPONENT_TOKEN`
 * makes every `<smart-divider>` in this injector render it instead of the
 * standard variation.
 *
 * NgComponentOutlet forwards inputs only, so `actionClick` is observed on the
 * implementation itself rather than on `<smart-divider>`.
 */
@Component({
  selector: 'docs-divider-custom-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [DividerComponent],
  providers: [
    {
      provide: DIVIDER_STANDARD_COMPONENT_TOKEN,
      useValue: CustomDividerComponent,
    },
  ],
  template: `
    <smart-divider
      [title]="'Team members'"
      [actionLabel]="'Add member'"
      [options]="options"
    />
  `,
})
export class DividerCustomExampleComponent {
  options: IDividerOptions = { variant: 'with-button', position: 'left' };
}

Source

The component lives in packages/shared/angular/src/lib/components/divider and is documented for Claude Code by the angular-components-divider skill.