IMPORTANT: New release for Ionic 4 will be release here as a new Version of the core component.
IMPORTANT: Versions 1.0.12 and 1.0.13 will not work as expected, please use <=1.0.11 or >=1.0.14 instead.
A zoom area component with pinch support to zoom any element in page
To see this in action, checkout the example project here.
IMPORTANT: This module requires Angular Animations and should be included in the app module.
<zoom-area>
<div>
zoom it
</div>
or
<img src="https://github.com/leonardosalles/ionic2-zoom-area/raw/master/zoom-it.jpg" alt="zoom it">
</zoom-area>
npm i --save @angular/animations
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
And then
imports: [
...
BrowserAnimationsModule,
...
]
npm i --save ionic2-zoom-area
Import ZoomAreaModule.forRoot()
in your app's main module
import { ZoomAreaModule } from 'ionic2-zoom-area';
@NgModule({
...
imports: [
...
ZoomAreaModule.forRoot()
],
...
})
export class AppModule {}
If your app uses lazy loading, you need to import ZoomAreaModule
in your shared module or child modules:
import { ZoomAreaModule } from 'ionic2-zoom-area';
@NgModule({
...
imports: [
...
ZoomAreaModule
],
...
})
export class SharedModule {}
zoom-area
Component(optional) (two-way) The scale of your initial zoom. Defaults to 1
.
(optional) (two-way) It allow you to hide or show zoom controls. Defaults to true
.
afterZoomIn
Listen to this event to be notified when the user interact with zoom in.
afterZoomOut
Listen to this event to be notified when the user interact with zoom out.
ZoomAreaProvider
ProvidernotifyScroll(): void
It broadcast an event when user scroll content inside zoom area.
onScroll$: Observable
It allows you to listen for a scroll event inside your zoom area. You can use it to collapse you header for example.
this.zoomAreaProvider.onScroll$.subscribe(state => {
if (state === this.zoomAreaProvider.SCROLL_STATE.COLLAPSED) {
console.log('Hide header');
}
if (state === this.zoomAreaProvider.SCROLL_STATE.EXPANDED) {
console.log('Show header');
}
});
scrollState$: Observable
It allows you to listen for a change in scroll state.
this.zoomAreaProvider.scrollState$.subscribe(state => {
console.log('Do whatever you want when scrollState change');
});
setCenter: Function
It allows you to change the position of the zoom manually if zoom scale is greather than 1.
this.zoomAreaProvider.setCenter(x, y);
this.zoomAreaProvider.setCenter(20, 50);
<zoom-area [(scale)]="scale" (afterZoomIn)="afterZoomIn($event)" (afterZoomOut)="afterZoomOut($event)" [(controls)]="showControls">
<div>Zoom It</div>
or
<img src="https://github.com/leonardosalles/ionic2-zoom-area/raw/master/assets/image-to-zoom.jpg" alt="Zoom It">
</zoom-area>
If you find this project useful, please star the repo to let people know that it's reliable. Also, share it with friends and colleagues that might find this useful as well. Thank you :smile:
We would like to thank JetBrains for supporting this project by offering open-source license of their IntelliJ IDE to us.