Angular 2 Image Zoom On Hover

Angular2 component shows the Zoomed Image on Hover

Some of these APIs and Components are not final and are subject to change!

Installation

npm install ng2-image-hover-zoom --save

If you use SystemJS to load your files, you might have to update your config:

System.config({
    map: {
        'ng2-image-hover-zoom': 'node_modules/ng2-image-hover-zoom/bundles/index.umd.js'
    }
});

First, import the ImageZoom Module

import {ImageZoomModule} from 'ng2-image-hover-zoom';

Then, add ImageZoom to your modules import array

@NgModule({
    imports : [CommonModule, ImageZoomModule, ...],
})

Then just add the [imageZoom] tag to your img element

<img src="smallImageSrc" imageZoom="zoomedImageSrc">