Angular Tutorial: Creating a Product Page Image Viewer with Zoom on Hover for Beginners

If you’re new to Angular and want to create a product page image viewer with zoom on hover, then this tutorial is for you. In this tutorial, we’ll create a simple image viewer using Angular that allows users to zoom in on product images when they hover over them.

Getting Started with Angular

Before we start, make sure you have Angular installed on your system. If not, you can install it by running the following command:


npm install -g @angular/cli


Once Angular is installed, you can create a new Angular project by running the following command:


ng new image-viewer


Creating the Image Viewer Component

Now that we have our Angular project set up, let’s create a new component for our image viewer. Run the following command to generate a new component:


ng generate component image-viewer


Next, open the newly created image-viewer.component.html file and add the following HTML:


<div class="image-viewer">
<img src="product-image.jpg" alt="Product Image" (mouseover)="zoomIn()" (mouseleave)="zoomOut()">
</div>


Now, let’s write the logic for the zoomIn and zoomOut functions in the image-viewer.component.ts file:


import { Component } from '@angular/core';

@Component({
selector: 'app-image-viewer',
templateUrl: './image-viewer.component.html',
styleUrls: ['./image-viewer.component.css']
})
export class ImageViewerComponent {
zoomIn() {
// Write logic to zoom in on the image
}

zoomOut() {
// Write logic to zoom out on the image
}
}


Styling the Image Viewer

Finally, let’s add some CSS to style our image viewer. Open the image-viewer.component.css file and add the following styles:


.image-viewer {
position: relative;
overflow: hidden;
}

.image-viewer img {
transition: transform 0.5s;
}

.image-viewer img:hover {
transform: scale(1.5);
}


And that’s it! You’ve now created a product page image viewer with zoom on hover using Angular. Feel free to customize the styles and add more features to enhance the user experience.