Angular 10 Image Zoom (Magnifier Popup) Hover Effect Using ngx-img-zoom Library Full Tutorial

Angular 10 Image Zoom (Magnifier Popup) Hover Effect Using ngx-img-zoom Library Full Tutorial

 

Welcome folks today in this blog post we will be building a Image Zoom Effect on Hover App in Angular 10. All the source code of the application is given below. A step by step youtube video is given below.

 

 

 

 

 

 

 

 

For this app we will need to install one dependency which is shown below.

 

npm i ngx-img-zoom

 

First of all inside your app.module.ts file include your dependency like this

 

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { NgxImgZoomModule  } from 'ngx-img-zoom';


@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule,NgxImgZoomModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

 

 

And after this you need to go to app.component.html and copy paste the following code like this

 

<!-- You can now use ngx-img-zoom component in app.component.html -->
<h1>
  {{title}}
</h1>
<h3>Angular 7 Image Preview before Upload:</h3>
<span style="color: red;" *ngIf="message">{{message}}</span>
<input #file type="file" accept="image/*" (change)="preview(file.files)" />
<img [src]="imgURL" height="200" *ngIf="imgURL" />
<ngx-img-zoom
  [zoomImageSrc]="zoomImageSrc"
  [previewImageSrc]="previewImageSrc"
  [imgStyle]="'width:515px; height:515px; bottom:0;  left:0;  right:0;  top:0;  margin:0 auto; border:1px solid #dcdcdc;'"
  [resultStyle]="'width:824px; height:824px; background-repeat: no-repeat; z-index: 2; position:absolute;-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); top: 0;left: 100%;'"
  [lensStyle]="'width:55px; height:55px'"
  [enableZoom]="enableZoom"
  [containerStyle]=""
></ngx-img-zoom>

 

See also  AngularJS Material Form Image Upload Using ng-file-upload Library in Browser Full Project For Beginners

 

And then inside your app.component.ts file copy paste the following code like this

 

import { Component } from "@angular/core";
import { NgxImgZoomService } from "ngx-img-zoom";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";

  public imagePath;
  imgURL: any;
  public message: string;

  enableZoom: Boolean = true;
  previewImageSrc: any;
  zoomImageSrc: any;

  constructor(private ngxImgZoom: NgxImgZoomService) {
    this.ngxImgZoom.setZoomBreakPoints([
      { w: 100, h: 100 },
      { w: 150, h: 150 },
      { w: 200, h: 200 },
      { w: 250, h: 250 },
      { w: 300, h: 300 }
    ]);
  }

  preview(files) {
    if (files.length === 0) return;

    var mimeType = files[0].type;
    if (mimeType.match(/image\/*/) == null) {
      this.message = "Only images are supported.";
      return;
    }

    var reader = new FileReader();
    this.imagePath = files;
    reader.readAsDataURL(files[0]);
    reader.onload = (_event) => {
      //this.imgURL = reader.result;
      this.previewImageSrc = reader.result;
      this.zoomImageSrc = reader.result;
    };
  }
}

 

See also  Angular 9 Digital Clock Timer Example Using ngx-countdown Library in Javascript Full Tutorial For Beginners

 

 

Leave a Reply