feat(view): add zoom change output

Author: Aymeric Duchein

projects/ngx-openlayers/src/lib/view.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { View, Extent, Coordinate } from 'openlayers';
+import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, EventEmitter, Output } from '@angular/core';
+import { View, Extent, ObjectEvent, Coordinate } from 'openlayers';
 import { MapComponent } from './map.component';
 
 @Component({
@@ -42,12 +42,17 @@ export class ViewComponent implements OnInit, OnChanges, OnDestroy {
   @Input()
   zoomAnimation = false;
 
+  @Output()
+  onChangeZoom: EventEmitter<ObjectEvent> = new EventEmitter<ObjectEvent>();
+
   constructor(private host: MapComponent) {}
 
   ngOnInit() {
     // console.log('creating ol.View instance with: ', this);
     this.instance = new View(this);
     this.host.instance.setView(this.instance);
+
+    this.instance.on('change:zoom', (event: ObjectEvent) => this.onChangeZoom.emit(event));
   }
 
   ngOnChanges(changes: SimpleChanges) {

src/app/basic/basic.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   template: `
   <aol-map [width]="'100%'" [height]="'100%'">
-    <aol-view [zoom]="zoom">
+    <aol-view [zoom]="zoom" (onChangeZoom)="onChangeZoom($event)">
       <aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
     </aol-view>
     <aol-layer-tile [opacity]="opacity">
@@ -86,4 +86,8 @@ export class BasicComponent {
     this.opacity = Math.max(this.opacity - 0.1, 0);
     console.log('opacity: ', this.opacity);
   }
+
+  onChangeZoom(evt) {
+    console.log('Zoom changed:', evt);
+  }
 }