# Compare

> Before/after split with a draggable divider. Project anything (images, text, divs, components) via `[wrCompareBefore]` and `[wrCompareAfter]` attributes — the component stacks them and clips the after side.

Source: https://ngwr.dev/reference/components/compare  
Kind: Composite

## Installation

```angular-ts
import { WrCompare } from 'ngwr/compare';

@Component({ imports: [WrCompare] })
export class MyComponent {}
```

## Image compare

Drag the divider — or use ←/→ on the focused slider.

```angular-html
<wr-compare [(position)]="pos">
  <img wrCompareBefore src="before.jpg" alt="" />
  <img wrCompareAfter src="after.jpg" alt="" />
</wr-compare>
```

## Vertical split

```angular-html
<wr-compare orientation="vertical">
  <img wrCompareBefore src="before.jpg" alt="" />
  <img wrCompareAfter src="after.jpg" alt="" />
</wr-compare>
```

## Arbitrary content

Works with any HTML. The `before` slot determines natural size; the `after` slot must occupy the same box.

```angular-html
<wr-compare>
  <div wrCompareBefore>…before content…</div>
  <div wrCompareAfter>…after content…</div>
</wr-compare>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `position` | Divider position as a percentage (0–100). Two-way bindable. | `number` | `50` |
| `ariaLabel` | Accessible name of the divider. Falls back to `compare.label`. | `string \| null` | `null` |
| `orientation` | Divider direction: - `'horizontal'` — divider line is vertical, drags left/right. - `'vertical'` — divider line is horizontal, drags up/down. | `'horizontal' \| 'vertical'` | `'horizontal'` |
| `showHandle` | Show the round drag handle on the divider. | `boolean` | `true` |
| `disabled` | Disable interaction (divider stays put). | `boolean` | `false` |
| `minPosition` | Initial position transform — accepts any number / numeric string. | `number` | `0` |
| `maxPosition` | — | `number` | `100` |

## Content slots

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `[wrCompareBefore] / [wrCompareAfter]` | Attributes marking the two pieces of projected content. | `attr` | `—` |