import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core'; @Component({ selector: 'app-img-magnifier', templateUrl: './img-magnifier.component.html', styleUrls: ['./img-magnifier.component.scss'] }) export class ImgMagnifierComponent implements OnInit, AfterViewInit { @Input() src: string; // image source @Input() zoom: number; // zoom level @Input() magnifierSize: {width: number, height: number}; // size of the magnifier @ViewChild('mainImg') mainImg: ElementRef; backgroundSize; magnifierPos = {x: 0, y: 0}; // position of the magnifier showMagnifier = false; constructor( private window: Window ) { } ngOnInit(): void { } ngAfterViewInit() { setTimeout(() => { this.calcBackgroundSize(); }, 1); } calcPos(event) { // calculate the current magnifier position const img = this.mainImg.nativeElement.getBoundingClientRect(); this.magnifierPos.x = Math.min( img.width - this.magnifierSize.width, Math.max(0, event.pageX - img.left - this.window.pageXOffset - this.magnifierSize.width / 2) ); this.magnifierPos.y = Math.min( img.height - this.magnifierSize.height + 7, Math.max(0, event.pageY - img.top - this.window.pageYOffset - this.magnifierSize.height / 2) ); } calcBackgroundSize() { this.backgroundSize = this.mainImg ? (this.mainImg.nativeElement.width * this.zoom - this.magnifierSize.width) + 'px ' + (this.mainImg.nativeElement.height * this.zoom - this.magnifierSize.height) + 'px ' : '0 0'; } }