Image Magnifier in Angular

Image magnifier in Angular

Here is a working stackblitz as per your requirements. It shows the implementation of image zoom functionality mentioned on w3school.
https://stackblitz.com/edit/angular-w3school-image-magnification

You have not shown your html and css files. So, I am not totally sure but the following might be the reason why zoom is not working for you.

Problem is that img-magnifier-glass div element is created using classical DOM method 'document.createElement'. And then, class 'img-magnifier-glass' is applied to it, again using a classical DOM method (setAttribute). But, in angular, styles are encapsulated. So, if you have added a class definition of '.img-magnifier-glass' in app.component.css then that class won't be applied to glass div since it is not mentioned in the template (app.component.html). See this for more info - https://github.com/angular/angular/issues/7845

To fix this, you can either move definition of class '.img-magnifier-glass' to styles.css (Where global styles are defined)

or you can keep the class in app.component.css but use pseudo-selector ::ng-deep with it. Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style.

::ng-deep .img-magnifier-glass {
}

or you can stop style encapsulation for component by specifying

@Component({
// ...
encapsulation: ViewEncapsulation.None, //<<<<< this one!
styles: [
  // ...
]
})

It will be better will be if you use Renderer2 (https://angular.io/api/core/Renderer2) instead for creating dynamic elements like glass element here. Renderer2 will take care of correctly encapsulating class applied on elements created using it.

Angular 7 Image zoom is not working on mouse hover

• Use [zoomMode]="'click'" to enable zoom on click
• Use [zoomMode]="'hover'" to enable zoom on hover

I've updated the stackblitz - https://stackblitz.com/edit/autocompcus-j5kujt.

Related Topics