Custom image zoom with Angular 2

In this post I´m going to explain how to create an easy custom image zoom with Angular 2, if you need more functionalities or a more complex solution, I recommend you to use some of the packages that you can find in npm.

On the contrary, if you need an easy solution, or you just want to improve you Angular 2 skills, I recommend you to continue reading.


First of all, we are going to define the main elements and the default behaviour of the functionality.

main.html

As you can see, we have two elements. On the left, there is the default size image, and on the right, the zoomed image.

When the user clicks on the default image (touchstart), a new element (<image-zoom>) is shown on the right with the image zoomed at the same point as the user clicked. If the user moves the mouse through the original image (touchmove), the zoomed image will change inmediatly. When the user stops clicking on the image (touchend), the zoomed image element will be hide.

Let’s see the typescript code…

main.ts

srcImage: The src image with the default size

srcImageZoom: The src image with the biggest size:

openZoom(): We use this function to show or hide the <image-zoom> component, as you can see on the html template, that component has a ngIf that depends on this.showZoom (boolean).

positionZoom(): This function calculates the position of the mouse relative to the left image. In this way, if we click on the top left corner of the image, we will have:

this.xPos = 0
this.YPos = 0

and if we click on the bottom right corner:

this.xPos = 100
this.YPos = 100

validPercent(): This function ensures that the cursor is inside the image, if the user moves the cursor outside the image, the <image-zoom> component will be hide.

At this point, we have half functionality done, now we will start to work on the <image-zoom> component.

image-zoom.html

image-zoom.ts

This component will receive three parameters: src, xPos and yPos.

As you can see on the html template, we are using a custom directive called moveBackground, this directive will contain all the logic and operations regarding the component.

Note: Don´t forget to add the moveBackground directive to your ngModules().

Let’s see this directive deeper…

The ElementRef dependence allow us to change the style of the component <image-zoom> dinamically.

When the component is initialized (ngOnInit), we define the background image (srcImageZoom at main.ts)

And… when the position of the cursor will change (ngOnChanges), the background position of the component will be changed according to the xPos and yPos values. We use buildPosition() and buildBackground() just to create the correct CSS syntaxis.

To complete the zoom functionality, we just need to add the next CSS code to the component.

Define a fixed width and height, and a hidden overflow, is necessary to achieve the desired result:

And that´s all, I hope you like it :)

Don´t forget to comment if you have some doubts or ideas to improve it.

See you on the next post.