ng2-image-hover-zoom

ng2-image-hover-zoom JS library on GitHub ng2-image-hover-zoom JS library on npm Download ng2-image-hover-zoom JS library

Zoom the Image on Hover using Angular 2

Version 1.0.2 License ISC
ng2-image-hover-zoom has no homepage
ng2-image-hover-zoom JS library on GitHub
ng2-image-hover-zoom JS library on npm
Download ng2-image-hover-zoom JS library
Keywords
Angular 2Angular2HoverZoomImageZoomng2-image-zoomng2-zoom-hoverng2ng2-image-hover-zoom

Angular 2 Image Zoom On Hover npm version npm monthly downloads

Angular2 component shows the Zoomed Image on Hover

semantic-release Dependency Status devDependency Status Known Vulnerabilities

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

Installation

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

Usage

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'
    }
});

Examples

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">

License

MIT