Just a beauty and responsive plug and play image comparator module for Angular 2+.
You can use it to compare two different images, like before and after models.
Just download or clone this repository and save the src/app/modules/image-comparison folder into your angular project (in your modules folder, if you're following Angular Folder Structure patterns).
Import the Comparison Module into the module that declares the component where the Image Comparison will be applied.
import { myComponent } from './my.component'
import { ComparisonModule } from './modules/image-comparison/image-comparison.module'
@NgModule({
declarations: [myComponent]
imports: [ComparisonModule]
})
Now, in your component, define a property with the URLs of the images to be compared into a list. It must have two values, obviously. See:
public images: string[] = [
'/assets/image/image1.jpg',
'/assets/image/image2.jpg',
]
Note: The images must to have exactly the same dimensions (width and height) to works fine, dude.
Then insert the as-image-comparison element in the HTML of your component, just like this:
<app-image-comparison *ngIf='images' [images]='images'></app-image-comparison>
Note: Is important to put the condition *ngIf='images' to avoid errors if the images have undefined values.
| Option | Type | Description |
|---|---|---|
| images | string[] | Array containing two items, each one as the URL of an image. |
| maxHeight (optional) | number | string | Defines a max height for the comparator stage. If number, it's calculated in pixels. If string, you can use px or vh unities. |
After all, this must works like this:
See the live demo on https://chelvis.github.io/image-comparison/.