Add zoom to show alert

projects/common-map/src/fm-map/components/if-zoom-to-show/if-zoom-to-show.directive.ts

@@ -1,25 +1,39 @@
-import { Directive, ViewContainerRef,TemplateRef,OnInit,Input } from '@angular/core';
-import { IItemLayer } from '../../models/item.layer';
+import { Directive, ViewContainerRef,TemplateRef,OnInit,Input, OnChanges } from '@angular/core';
+import { layer } from 'ol';
 import { MapComponent } from 'ngx-openlayers';
 
 @Directive({
   selector: '[fm-map-ifZoomToShow]',
 })
-export class ifZoomToShowDirective  implements OnInit {
-  @Input('fm-map-ifZoomToShow') itemLayer$:IItemLayer;
+export class ifZoomToShowDirective  implements OnInit,OnChanges {
+  @Input('fm-map-ifZoomToShow') layer$:layer;
 
   constructor(private templateRef$: TemplateRef<any>,private viewContainerRef$: ViewContainerRef,private map$: MapComponent) { }
-  private hasView = false;
-  ngOnInit() {    
-    let minZoom = this.itemLayer$.layer.getMinZoom();
-    let currentZoom = this.map$.instance.getView().getZoom();
+  private showView = false;
 
-      if ( currentZoom < minZoom ) {
-        this.viewContainerRef$.createEmbeddedView(this.templateRef$);
-        this.hasView=true;
-      } else if (this.hasView) {
-        this.viewContainerRef$.clear();
-        this.hasView = false;     
-      }  
+  ngOnInit() {    
+    this.map$.instance.on('moveend', (e) => {
+      this.checkZoom();     
+    });
+  }
+
+  ngOnChanges() {
+    this.checkZoom();
+  }
+
+  checkZoom() {
+    if(this.layer$ && this.map$.instance) {
+      let minZoom = this.layer$.getMinZoom();
+      let currentZoom = this.map$.instance.getView().getZoom();
+      let view = currentZoom < minZoom;
+      if(view!= this.showView) {
+        this.showView=view;
+        if ( !this.showView) {
+          this.viewContainerRef$.clear();
+        } else {
+          this.viewContainerRef$.createEmbeddedView(this.templateRef$);
+        }  
+      }      
+    }      
   }
 }