Installation
import { WrDescriptions, WrDescriptionItem } from 'ngwr/descriptions';
@Component({ imports: [WrDescriptions, WrDescriptionItem] })
export class MyComponent {}Inline + bordered
<wr-descriptions title="Account" inline bordered>
<wr-description-item label="Name">Ada Lovelace</wr-description-item>
<wr-description-item label="Email">[email protected]</wr-description-item>
<wr-description-item label="Joined">2024-03-12</wr-description-item>
</wr-descriptions>Narrow container (container query)
With responsive, inline layouts query their own width, not the viewport — so the same inline bordered descriptions reflows to a stacked layout when placed in a narrow container, even on a wide page. The box below is fixed at 280px.
<div style="width: 280px"><wr-descriptions responsive inline bordered>…</wr-descriptions></div>Descriptions API
| Name | Description | Type | Default |
|---|---|---|---|
title | Optional title shown above the list. | string | '' |
inline | Two-column rows (label left, value right) instead of stacked. | boolean | false |
bordered | Add visible borders around each row. | boolean | false |
responsive | Reflow inline rows back to a stacked layout when the box itself is narrow (a container query on its own width, not the viewport — so it adapts inside a narrow card or side panel). Makes the box fill its container's width. | boolean | false |
Description item API
| Name | Description | Type | Default |
|---|---|---|---|
label | — | string | '' |