kylewetton / image-compare-viewer

Compare before and after images, for grading and other retouching for instance. Vanilla JS, zero dependencies.
https://image-compare-viewer.netlify.com
MIT License
554 stars 34 forks source link

Its compatible with Angular & Typescript? #48

Closed ignaciocorball closed 2 years ago

ignaciocorball commented 2 years ago

I'm getting this error while import ImageCompare.

"ImageCompare" is declared, but its value is never read.ts(6133) No file declaration found for module 'node_modules/image-compare-viewer'. 'c:/frontend/node_modules/image-compare-viewer/src/scripts/index.js' implicitly has type "any". Try "npm i --save-dev @types/image-compare-viewer" if it exists or add a new declaration file (.d.ts) that includes "declare module 'node_modules/image-compare-viewer';".

My typescript file are:

import { Component, OnInit } from '@angular/core'; import ImageCompare from "node_modules/image-compare-viewer";

@Component({ selector: 'app-dzmt-carousel', templateUrl: './dzmt-carousel.component.html', styleUrls: ['./dzmt-carousel.component.css'] }) export class DzmtCarouselComponent implements OnInit {

constructor() { }

ngOnInit(): void {

const element = document.getElementById("image-compare");
const viewer = new ImageCompare(element).mount();

}

}

kyleatblackfoot commented 2 years ago

Hey, image-compare-viewer isn't written in TypeScript (I know, I should update this when I have time). For now though, you can definitely use it in your project you just simply have to create a declaration file for it

https://stackoverflow.com/a/50516783