Compare

import { WrCompare } from 'ngwr/compare';

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

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

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

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

Before

After

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`

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

Installation