Pinch zoom in zoom out using angular

@ViewChild('img', {static: true}) img: any;

zoomLevel: number = 100;
scaling: boolean;

pinchZoom() {
    let oldDist = undefined;    this.renderer.listen(this.img.nativeElement, 'touchstart', (e) => {
        if (e.touches.length === 2) {
            this.scaling = true;        }
    });    this.renderer.listen(this.img.nativeElement, 'touchmove', (e) => {
        if (this.scaling) {
            let newDist = Math.hypot(
                e.touches[0].pageX - e.touches[1].pageX,                e.touches[0].pageY - e.touches[1].pageY);            this.zoomBy(this.img.nativeElement, (newDist > oldDist));            oldDist = newDist;        }
    });    this.renderer.listen(this.img.nativeElement, 'touchend', (e) => {
        if (this.scaling) {
            this.scaling = false;        }
        oldDist = undefined;    });}

zoomBy(img, zoomInOrOut: boolean) {
    if(zoomInOrOut) {
        this.zoomLevel = this.zoomLevel + 4;    } else {
        if (this.zoomLevel > 40) {
        this.zoomLevel = this.zoomLevel - 4;        }
    }
    img.style.zoom = this.zoomLevel + '%';}