Compare

import { Component } from '@angular/core';
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 style="height: 12rem">
  <div wrCompareBefore>…before content…</div>
  <div wrCompareAfter>…after content…</div>
</wr-compare>