1.2.0 - handle imageSrc changes

Author: henczi

projects/ng-magnizoom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-magnizoom",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Angular image magnifier (based on HTML canvas)",
   "repository": {
     "type": "git",

projects/ng-magnizoom/src/lib/magnizoom.component.ts

@@ -55,9 +55,15 @@ export class NgMagnizoomComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes && (changes.lensSize || changes.zoomCenter || changes.zoomFactor)) {
+    if (!changes) {
+      return;
+    }
+    if (changes.lensSize || changes.zoomCenter || changes.zoomFactor) {
       this.updateParameters();
     }
+    if (changes.imageSrc && !changes.imageSrc.firstChange) {
+      this.loadImage(changes.imageSrc.currentValue);
+    }
   }
 
   initContext() {

src/app/app.component.html

@@ -1,16 +1,18 @@
 <h1>Ng Magnizoom</h1>
 
+<button style="position: fixed; top: 10px; right: 10px;" (click)="toggleImageSrc()">Toggle Image</button>
+
 <h2>Mode</h2>
 <h3>Lens</h3>
-<ng-magnizoom zoomMode="LENS" imageSrc="https://www.w3schools.com/html/pic_trulli.jpg"></ng-magnizoom>
+<ng-magnizoom zoomMode="LENS" imageSrc="{{imageSrc}}"></ng-magnizoom>
 <h3>Cover</h3>
-<ng-magnizoom zoomMode="COVER" imageSrc="https://www.w3schools.com/html/pic_trulli.jpg"></ng-magnizoom>
+<ng-magnizoom zoomMode="COVER" imageSrc="{{imageSrc}}"></ng-magnizoom>
 
 
 <h2>Multiple</h2>
-<ng-magnizoom zoomMode="LENS" imageSrc="https://www.w3schools.com/html/pic_trulli.jpg"></ng-magnizoom>
-<ng-magnizoom zoomMode="COVER" imageSrc="https://www.w3schools.com/html/pic_trulli.jpg"></ng-magnizoom>
-<ng-magnizoom zoomMode="LENS" imageSrc="https://www.w3schools.com/html/pic_trulli.jpg"></ng-magnizoom>
+<ng-magnizoom zoomMode="LENS" imageSrc="{{imageSrc}}"></ng-magnizoom>
+<ng-magnizoom zoomMode="COVER" imageSrc="{{imageSrc}}"></ng-magnizoom>
+<ng-magnizoom zoomMode="LENS" imageSrc="{{imageSrc}}"></ng-magnizoom>
 
 
 <h2>ImageStyle / ImageClass</h2>
@@ -30,7 +32,7 @@ <h2>Fix size and position</h2>
   zoomCenterUnit="PIXEL"
   [lensSize]="{ width: 100, height: 160 }"
   [zoomCenter]="{ x: 100, y: 100 }"
-  imageSrc="https://www.w3schools.com/html/pic_trulli.jpg">
+  imageSrc="{{imageSrc}}">
 </ng-magnizoom>
 
 <h2>Fix size and position</h2>
@@ -42,5 +44,5 @@ <h2>Fix size and position</h2>
   [lensSize]="{ width: 0.25, height: 0.25 }"
   [(zoomCenter)]="position"
   [(zoomFactor)]="zoom"
-  imageSrc="https://www.w3schools.com/html/pic_trulli.jpg">
+  imageSrc="{{imageSrc}}">
 </ng-magnizoom>

src/app/app.component.ts

@@ -10,4 +10,13 @@ export class AppComponent {
 
   zoom = 3;
   position = { x: 200, y: 100 };
+
+  imageSrc = 'https://www.w3schools.com/html/pic_trulli.jpg';
+
+  toggleImageSrc() {
+    this.imageSrc = this.imageSrc === 'https://www.w3schools.com/html/pic_trulli.jpg'
+      ? 'https://www.w3schools.com/html/img_girl.jpg'
+      : 'https://www.w3schools.com/html/pic_trulli.jpg';
+
+  }
 }