API reference
Headless separator is a single directive surface. It exposes orientation and decorative semantics while leaving sizing, spacing, and surrounding layout to your markup.
Directive contract
Attach the directive to any block element that should behave as a divider in your layout.
Headless separator attachment
html
<div tngSeparator></div>
<div tngSeparator orientation="vertical"></div>
<div tngSeparator [decorative]="false"></div>
| Surface | Value | Purpose |
|---|---|---|
| Selector | [tngSeparator] | Attaches the divider primitive to your chosen element. |
| Export alias | tngSeparator | Lets templates reference the directive instance if needed. |
orientation | 'horizontal' | 'vertical' | Controls divider axis and semantic orientation when non-decorative. |
decorative | boolean | When true, applies aria-hidden="true"; when false, applies role="separator". |
| Host hooks | data-slot="separator", data-orientation | Stable styling selectors for both visual and semantic variants. |
Owner responsibilities
- Define thickness, length, spacing, and any surrounding shell layout in your own CSS.
- Keep decorative separators out of the accessibility tree unless the division has real meaning.
- Provide surrounding semantics yourself when a separator divides regions, groups, or landmarks.