AW-6046 Angular 17

.gitignore

@@ -51,5 +51,5 @@ projects/common-map/node_modules/
 .angular/*
 projects/common-map3d/node_modules/
 projects/common-map/node_modules/
-projects/ngx-openlayers/node_modules/
+projects/ng-openlayers/node_modules/
 projects/common/node_modules/

Jenkinsfile.develop

@@ -21,4 +21,4 @@ pipeline {
       postAlways();
     }
   }
-}
+}c

angular.json

@@ -254,38 +254,38 @@
         }
       }
     },
-    "ngx-openlayers": {
+    "ng-openlayers": {
       "projectType": "library",
-      "root": "projects/ngx-openlayers",
-      "sourceRoot": "projects/ngx-openlayers/src",
+      "root": "projects/ng-openlayers",
+      "sourceRoot": "projects/ng-openlayers/src",
       "prefix": "lib",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "projects/ngx-openlayers/tsconfig.lib.json",
-            "project": "projects/ngx-openlayers/ng-package.json"
+            "tsConfig": "projects/ng-openlayers/tsconfig.lib.json",
+            "project": "projects/ng-openlayers/ng-package.json"
           },
           "configurations": {
             "production": {
-              "tsConfig": "projects/ngx-openlayers/tsconfig.lib.prod.json"
+              "tsConfig": "projects/ng-openlayers/tsconfig.lib.prod.json"
             }
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/ngx-openlayers/src/test.ts",
-            "tsConfig": "projects/ngx-openlayers/tsconfig.spec.json",
-            "karmaConfig": "projects/ngx-openlayers/karma.conf.js"
+            "main": "projects/ng-openlayers/src/test.ts",
+            "tsConfig": "projects/ng-openlayers/tsconfig.spec.json",
+            "karmaConfig": "projects/ng-openlayers/karma.conf.js"
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
             "lintFilePatterns": [
-              "projects/ngx-openlayers/**/*.ts",
-              "projects/ngx-openlayers/**/*.html"
+              "projects/ng-openlayers/**/*.ts",
+              "projects/ng-openlayers/**/*.html"
             ]
           }
         }

package.json

@@ -23,7 +23,7 @@
     "@farmmaps/common": "file:dist/common",
     "@farmmaps/common-map": "file:dist/common-map",
     "@farmmaps/common-map3d": "file:dist/common-map3d",
-    "ngx-openlayers": "file:dist/ngx-openlayers",
+    "ng-openlayers": "file:dist/ng-openlayers",
     "@microsoft/signalr": "^3.1.16",
     "@ng-bootstrap/ng-bootstrap": "^15.0.0",
     "@ngrx/effects": "^16",

projects/common-map/src/fm-map/common-map.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 //external modules
-import { AngularOpenlayersModule } from 'ngx-openlayers';
+import { AngularOpenlayersModule } from 'ng-openlayers';
 import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

projects/common-map/src/fm-map/components/aol/file-drop-target/file-drop-target.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit, EventEmitter, Output, Inject } from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 
 import * as proj  from 'ol/proj';
 import {Point,Geometry} from 'ol/geom';

projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges ,Host} from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 import  Overlay  from 'ol/Overlay';
 import { fromLonLat, toLonLat } from 'ol/proj';
 

projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts

@@ -1,5 +1,5 @@
 import { Component, Host, Input, Output, EventEmitter,OnDestroy, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
-import { LayerGroupComponent, MapComponent } from 'ngx-openlayers';
+import { LayerGroupComponent, MapComponent } from 'ng-openlayers';
 import { ItemService,IItem,AppConfig } from '@farmmaps/common';
 import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
 import { ILayerData} from '../../../models/layer.data';

projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts

@@ -1,5 +1,5 @@
 import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken, OnDestroy, LOCALE_ID } from '@angular/core';
-import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ngx-openlayers';
+import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ng-openlayers';
 import { ItemService, ItemTypeService, IItem, IItemType, FolderService } from '@farmmaps/common';
 
 import { Feature } from 'ol';

projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.ts

@@ -3,7 +3,7 @@ import { IItemLayer } from '../../../models/item.layer';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../../reducers/map.reducer';
 import * as mapActions from '../../../actions/map.actions';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 import { ILayervalue } from '../../../models/layer.value';
 import { Observable, interval, Subject } from 'rxjs';
 import { debounce, throttle } from 'rxjs/operators';

projects/common-map/src/fm-map/components/aol/layer-vector-image/layer-vector-image.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { LayerVectorComponent, MapComponent } from 'ngx-openlayers';
+import { LayerVectorComponent, MapComponent } from 'ng-openlayers';
 import  RenderType  from 'ol/layer/Vector';
 import { Vector as VectorSource } from 'ol/source';
 import { Geometry } from 'ol/geom';

projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Host, OnChanges, SimpleChanges,ChangeDetectorRef } from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 import {IMapState} from '../../../models/map.state'
 import {View} from 'ol';
 import { fromLonLat } from 'ol/proj';

projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.ts

@@ -1,5 +1,5 @@
 import { Component, Host, Input, OnInit, ChangeDetectorRef  } from '@angular/core';
-import { ViewComponent, MapComponent } from 'ngx-openlayers';
+import { ViewComponent, MapComponent } from 'ng-openlayers';
 
 import {View} from 'ol';
 

projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts

@@ -1,6 +1,6 @@
 import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
 import { ActivatedRoute  } from '@angular/router';
-import { ViewComponent, MapComponent } from 'ngx-openlayers';
+import { ViewComponent, MapComponent } from 'ng-openlayers';
 
  
 @Component({

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

@@ -1,7 +1,7 @@
 import { Directive, ViewContainerRef,TemplateRef,OnInit,Input, OnChanges } from '@angular/core';
 import { Layer } from 'ol/layer';
 import { Source } from 'ol/source';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 
 @Directive({
   selector: '[fmMapIfZoomToShow]',

projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit,Input,Host  } from '@angular/core';
 import { Interaction} from 'ol/interaction';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 import OLCesium from 'olcs/OLCesium';
 import RasterSynchronizer from 'olcs/RasterSynchronizer';
 import VectorSynchronizer from 'olcs/VectorSynchronizer';

projects/ng-openlayers/.eslintrc.json

@@ -10,8 +10,7 @@
       ],
       "parserOptions": {
         "project": [
-          "projects/ngx-openlayers/tsconfig.lib.json",
-          "projects/ngx-openlayers/tsconfig.spec.json"
+          "libs/ng-openlayers/tsconfig.*?.json"
         ],
         "createDefaultProgram": true
       },
@@ -42,8 +41,7 @@
           "off",
           "always"
         ],
-        "import/order": "off",
-        "no-underscore-dangle": "off"
+        "import/order": "off"
       }
     },
     {

projects/ng-openlayers/.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+

projects/ng-openlayers/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+    client: {
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ng-openlayers'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true,
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};

projects/ng-openlayers/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-openlayers",
+  "dest": "../../dist/libs/ng-openlayers",
   "assets": [
     "ngcc.config.js"
   ],

projects/ng-openlayers/ngcc.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ignorableDeepImportMatchers: [/ol\//],
+};

projects/ng-openlayers/package-lock.json

@@ -0,0 +1,33 @@
+{
+  "name": "ng-openlayers",
+  "version": "17.1.3",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "ng-openlayers",
+      "version": "17.1.3",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=17.0.0",
+        "@angular/core": ">=17.0.0",
+        "ol": "^8.2.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    }
+  },
+  "dependencies": {
+    "tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    }
+  }
+}

projects/ng-openlayers/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "ng-openlayers",
+  "version": "17.1.3",
+  "description": "OpenLayers library for Angular",
+  "author": "Kamil Furtak (kamil.furtak@gmail.com)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kamilfurtak/ng-openlayers.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kamilfurtak/ng-openlayers/issues"
+  },
+  "homepage": "https://github.com/kamilfurtak/ng-openlayers",
+  "keywords": [
+    "ngx-openlayers",
+    "angular",
+    "angular17",
+    "openlayers",
+    "openlayers8",
+    "ol8"
+  ],
+  "license": "MPL-2.0",
+  "private": false,
+  "scripts": {
+    "release": "standard-version -m \"chore(release): version %s\" -t \"\"",
+    "prepublishOnly": "cp projects/ng-openlayers/README.md dist/ng-openlayers/README.md"
+  },
+  "standard-version": {
+    "postchangelog": "cp projects/ng-openlayers/CHANGELOG.md dist/ng-openlayers/CHANGELOG.md"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=17.0.0",
+    "@angular/core": ">=17.0.0",
+    "ol": "^8.2.0"
+  }
+}

projects/ng-openlayers/project.json

@@ -0,0 +1,38 @@
+{
+  "name": "ng-openlayers",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/ng-openlayers/src",
+  "prefix": "lib",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "options": {
+        "tsConfig": "libs/ng-openlayers/tsconfig.lib.json",
+        "project": "libs/ng-openlayers/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/ng-openlayers/tsconfig.lib.prod.json"
+        }
+      }
+    },
+    "test": {
+      "executor": "@angular-devkit/build-angular:karma",
+      "options": {
+        "main": "libs/ng-openlayers/src/test.ts",
+        "tsConfig": "libs/ng-openlayers/tsconfig.spec.json",
+        "karmaConfig": "libs/ng-openlayers/karma.conf.js"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "lintFilePatterns": [
+          "libs/ng-openlayers/**/*.ts",
+          "libs/ng-openlayers/**/*.html"
+        ]
+      }
+    }
+  }
+}

projects/ng-openlayers/src/lib/attribution.component.ts

@@ -1,18 +1,15 @@
 import { Component, ElementRef, OnInit } from '@angular/core';
-import { Attribution } from 'ol/control';
 
 @Component({
   selector: 'aol-attribution',
   template: '<ng-content></ng-content>',
 })
 export class AttributionComponent implements OnInit {
-  instance: Attribution;
-  html: string;
+  label: string;
 
   constructor(private elementRef: ElementRef) {}
 
   ngOnInit() {
-    this.html = this.elementRef.nativeElement.innerHTML;
-    this.instance = new Attribution(this);
+    this.label = this.elementRef.nativeElement.innerHTML;
   }
 }

projects/ng-openlayers/src/lib/attributions.component.ts

@@ -1,7 +1,6 @@
 import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
-import { Attribution } from 'ol/control';
-import { AttributionComponent } from './attribution.component';
 import { SourceComponent } from './sources/source.component';
+import { AttributionComponent } from './attribution.component';
 
 @Component({
   selector: 'aol-attributions',
@@ -11,14 +10,14 @@ export class AttributionsComponent implements AfterViewInit {
   @ContentChildren(AttributionComponent)
   attributions: QueryList<AttributionComponent>;
 
-  instance: Array<Attribution>;
+  instance: Array<string>;
 
   constructor(@Host() private source: SourceComponent) {}
 
   /* we can do this at the very end */
   ngAfterViewInit() {
     if (this.attributions.length) {
-      this.instance = this.attributions.map((cmp) => cmp.instance);
+      this.instance = this.attributions.map((cmp) => cmp.label);
       // console.log('setting attributions:', this.instance);
       this.source.instance.setAttributions(this.instance);
     }

projects/ng-openlayers/src/lib/collectioncoordinates.component.ts

@@ -1,12 +1,12 @@
 import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { MapComponent } from './map.component';
+import { GeometryLinestringComponent } from './geom/geometrylinestring.component';
+import { GeometryPolygonComponent } from './geom/geometrypolygon.component';
+import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component';
+import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component';
+import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component';
 import { Coordinate } from 'ol/coordinate';
 import { transform } from 'ol/proj';
-import { GeometryLinestringComponent } from './geom/geometrylinestring.component';
-import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component';
-import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component';
-import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component';
-import { GeometryPolygonComponent } from './geom/geometrypolygon.component';
-import { MapComponent } from './map.component';
 
 @Component({
   selector: 'aol-collection-coordinates',

projects/ng-openlayers/src/lib/controls/attribution.component.ts

@@ -10,11 +10,14 @@ export class ControlAttributionComponent implements OnInit, OnDestroy {
   @Input()
   collapsible: boolean;
 
-  componentType = 'control';
+  public componentType = 'control';
   instance: Attribution;
-  target: Element;
+  target: HTMLElement;
 
-  constructor(private map: MapComponent, private element: ElementRef) {}
+  constructor(
+    private map: MapComponent,
+    private element: ElementRef
+  ) {}
 
   ngOnInit() {
     this.target = this.element.nativeElement;

projects/ng-openlayers/src/lib/controls/control.component.ts

@@ -1,7 +1,7 @@
 import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
 import { Control } from 'ol/control';
-import { ContentComponent } from '../content.component';
 import { MapComponent } from '../map.component';
+import { ContentComponent } from '../content.component';
 
 @Component({
   selector: 'aol-control',
@@ -11,9 +11,9 @@ export class ControlComponent implements OnInit, OnDestroy {
   @ContentChild(ContentComponent, { static: true })
   content: ContentComponent;
 
-  componentType = 'control';
+  public componentType = 'control';
   instance: Control;
-  element: Element;
+  element: HTMLElement;
 
   constructor(private map: MapComponent) {}
 

projects/ng-openlayers/src/lib/controls/default.component.ts

@@ -1,6 +1,6 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Collection } from 'ol';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { Control, defaults } from 'ol/control';
+import { Collection } from 'ol';
 import { Options as AttributionOptions } from 'ol/control/Attribution';
 import { Options as RotateOptions } from 'ol/control/Rotate';
 import { Options as ZoomOptions } from 'ol/control/Zoom';

projects/ng-openlayers/src/lib/controls/mouseposition.component.ts

@@ -1,8 +1,8 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import MousePosition from 'ol/control/MousePosition';
+import { MapComponent } from '../map.component';
 import { CoordinateFormat } from 'ol/coordinate';
 import { ProjectionLike } from 'ol/proj';
-import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control-mouseposition',
@@ -13,11 +13,14 @@ export class ControlMousePositionComponent implements OnInit, OnDestroy {
   coordinateFormat: CoordinateFormat;
   @Input()
   projection: ProjectionLike;
-  target: Element;
 
   instance: MousePosition;
+  target: HTMLElement;
 
-  constructor(private map: MapComponent, private element: ElementRef) {}
+  constructor(
+    private map: MapComponent,
+    private element: ElementRef
+  ) {}
 
   ngOnInit() {
     this.target = this.element.nativeElement;

projects/ng-openlayers/src/lib/controls/overviewmap.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Layer } from 'ol/layer';
 import { View } from 'ol';
 import { OverviewMap } from 'ol/control';
-import { Layer } from 'ol/layer';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -20,7 +20,7 @@ export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy
   @Input()
   layers: Layer[];
   @Input()
-  target: Element;
+  target: HTMLElement;
   @Input()
   tipLabel: string;
   @Input()

projects/ng-openlayers/src/lib/controls/scaleline.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ScaleLine } from 'ol/control';
 import { MapComponent } from '../map.component';
+import { Units } from 'ol/control/ScaleLine';
 
 @Component({
   selector: 'aol-control-scaleline',
@@ -8,13 +9,11 @@ import { MapComponent } from '../map.component';
 })
 export class ControlScaleLineComponent implements OnInit, OnDestroy {
   @Input()
-  units: string;
+  units: Units;
 
   instance: ScaleLine;
 
-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-scaleline');
-  }
+  constructor(private map: MapComponent) {}
 
   ngOnInit() {
     this.instance = new ScaleLine(this);
@@ -22,7 +21,6 @@ export class ControlScaleLineComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    // console.log('removing aol-control-scaleline');
     this.map.instance.removeControl(this.instance);
   }
 }

projects/ng-openlayers/src/lib/controls/zoom.component.ts

@@ -10,9 +10,9 @@ export class ControlZoomComponent implements OnInit, OnDestroy {
   @Input()
   duration: number;
   @Input()
-  zoomInLabel: string | Node;
+  zoomInLabel: string | HTMLElement;
   @Input()
-  zoomOutLabel: string | Node;
+  zoomOutLabel: string | HTMLElement;
   @Input()
   zoomInTipLabel: string;
   @Input()

projects/ng-openlayers/src/lib/controls/zoomtoextent.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ZoomToExtent } from 'ol/control';
-import { Extent } from 'ol/extent';
 import { MapComponent } from '../map.component';
+import { Extent } from 'ol/extent';
 
 @Component({
   selector: 'aol-control-zoomtoextent',
@@ -11,7 +11,7 @@ export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
   @Input()
   className: string;
   @Input()
-  label: string | Node;
+  label: string | HTMLElement;
   @Input()
   tipLabel: string;
   @Input()

projects/ng-openlayers/src/lib/coordinate.component.ts

@@ -1,10 +1,10 @@
-import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { Component, Optional, OnChanges, Input, SimpleChanges, OnInit } from '@angular/core';
 import { transform } from 'ol/proj';
-import { GeometryCircleComponent } from './geom/geometrycircle.component';
-import { GeometryPointComponent } from './geom/geometrypoint.component';
 import { MapComponent } from './map.component';
-import { OverlayComponent } from './overlay.component';
+import { GeometryPointComponent } from './geom/geometrypoint.component';
+import { GeometryCircleComponent } from './geom/geometrycircle.component';
 import { ViewComponent } from './view.component';
+import { OverlayComponent } from './overlay.component';
 
 @Component({
   selector: 'aol-coordinate',

projects/ng-openlayers/src/lib/feature.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core';
 import { Feature } from 'ol';
 import { SourceVectorComponent } from './sources/vector.component';
 
@@ -10,8 +10,8 @@ export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
   @Input()
   id: string | number | undefined;
 
-  componentType = 'feature';
-  instance: Feature;
+  public componentType = 'feature';
+  public instance: Feature;
 
   constructor(private host: SourceVectorComponent) {}
 

projects/ng-openlayers/src/lib/formats/mvt.component.ts

@@ -1,8 +1,7 @@
 import { Component, forwardRef, Input } from '@angular/core';
-import { MVT } from 'ol/format';
-import { Geometry } from 'ol/geom';
-import GeometryType from 'ol/geom/GeometryType';
 import { FormatComponent } from './format.component';
+import { MVT } from 'ol/format';
+import { FeatureClass } from 'ol/Feature';
 
 @Component({
   selector: 'aol-format-mvt',
@@ -11,9 +10,7 @@ import { FormatComponent } from './format.component';
 })
 export class FormatMVTComponent extends FormatComponent {
   @Input()
-  featureClass:
-    | ((geom: Geometry | { [k: string]: any }) => any)
-    | ((geom: GeometryType, arg2: number[], arg3: number[] | number[][], arg4: { [k: string]: any }) => any);
+  featureClass: FeatureClass;
   @Input()
   geometryName: string;
   @Input()

projects/ng-openlayers/src/lib/geom/geometrycircle.component.ts

@@ -1,23 +1,14 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Circle } from 'ol/geom';
 import { FeatureComponent } from '../feature.component';
-import { MapComponent } from '../map.component';
+import { Circle } from 'ol/geom';
 import { SimpleGeometryComponent } from './simplegeometry.component';
+import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-geometry-circle',
   template: ` <ng-content></ng-content> `,
 })
 export class GeometryCircleComponent extends SimpleGeometryComponent implements OnInit {
-  componentType = 'geometry-circle';
-  instance: Circle;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-    // defaulting coordinates to [0,0]. To be overridden in child component.
-    this.instance = new Circle([0, 0]);
-  }
-
   @Input()
   get radius(): number {
     return this.instance.getRadius();
@@ -25,4 +16,13 @@ export class GeometryCircleComponent extends SimpleGeometryComponent implements
   set radius(radius: number) {
     this.instance.setRadius(radius);
   }
+
+  public componentType = 'geometry-circle';
+  public instance: Circle;
+
+  constructor(map: MapComponent, host: FeatureComponent) {
+    super(map, host);
+    // defaulting coordinates to [0,0]. To be overridden in child component.
+    this.instance = new Circle([0, 0]);
+  }
 }

projects/ng-openlayers/src/lib/geom/simplegeometry.component.ts

@@ -1,16 +1,20 @@
-import { Directive, Input, OnInit } from '@angular/core';
-import SimpleGeometry from 'ol/geom/SimpleGeometry';
+import { Input, OnInit, Directive } from '@angular/core';
 import { FeatureComponent } from '../feature.component';
 import { MapComponent } from '../map.component';
+import SimpleGeometry from 'ol/geom/SimpleGeometry';
 
 @Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class SimpleGeometryComponent implements OnInit {
   @Input() srid: string;
 
-  instance: SimpleGeometry;
-  componentType = 'simple-geometry';
+  public instance: SimpleGeometry;
+  public componentType = 'simple-geometry';
 
-  constructor(protected map: MapComponent, protected host: FeatureComponent) {}
+  protected constructor(
+    protected map: MapComponent,
+    protected host: FeatureComponent
+  ) {}
 
   ngOnInit() {
     this.host.instance.setGeometry(this.instance);

projects/ng-openlayers/src/lib/graticule.component.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { Component, Input, AfterContentInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
 import { Graticule } from 'ol';
 import { Stroke } from 'ol/style';
 import { MapComponent } from './map.component';
@@ -18,7 +18,7 @@ export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestro
   latLabelPosition: number;
 
   instance: any;
-  componentType = 'graticule';
+  public componentType = 'graticule';
 
   constructor(private map: MapComponent) {}
 

projects/ng-openlayers/src/lib/interactions/default.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { defaults, Interaction } from 'ol/interaction';
 import { Collection } from 'ol';
 import { MapComponent } from '../map.component';
@@ -8,12 +8,35 @@ import { MapComponent } from '../map.component';
   template: '',
 })
 export class DefaultInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  altShiftDragRotate: boolean;
+  @Input()
+  onFocusOnly: boolean;
+  @Input()
+  doubleClickZoom: boolean;
+  @Input()
+  keyboard: boolean;
+  @Input()
+  mouseWheelZoom: boolean;
+  @Input()
+  shiftDragZoom: boolean;
+  @Input()
+  dragPan: boolean;
+  @Input()
+  pinchRotate: boolean;
+  @Input()
+  pinchZoom: boolean;
+  @Input()
+  zoomDelta: number;
+  @Input()
+  zoomDuration: number;
+
   instance: Collection<Interaction>;
 
   constructor(private map: MapComponent) {}
 
   ngOnInit() {
-    this.instance = defaults();
+    this.instance = defaults(this);
     this.instance.forEach((i) => this.map.instance.addInteraction(i));
   }
 

projects/ng-openlayers/src/lib/interactions/draganddrop.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import Feature from 'ol/format/Feature';
 import { DragAndDrop } from 'ol/interaction';
-import { ProjectionLike } from 'ol/proj';
+import FeatureFormat from 'ol/format/Feature';
 import { MapComponent } from '../map.component';
+import { ProjectionLike } from 'ol/proj';
 
 @Component({
   selector: 'aol-interaction-draganddrop',
@@ -10,11 +10,11 @@ import { MapComponent } from '../map.component';
 })
 export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
   @Input()
-  formatConstructors: ((n: Feature) => any)[];
+  formatConstructors: FeatureFormat[];
   @Input()
   projection: ProjectionLike;
   @Input()
-  target: Element;
+  target: HTMLElement;
 
   instance: DragAndDrop;
 

projects/ng-openlayers/src/lib/interactions/dragbox.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Condition } from 'ol/events/condition';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { DragBox } from 'ol/interaction';
-import { EndCondition } from 'ol/interaction/DragBox';
 import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
+import { EndCondition } from 'ol/interaction/DragBox';
 
 @Component({
   selector: 'aol-interaction-dragbox',

projects/ng-openlayers/src/lib/interactions/dragpan.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import Kinetic from 'ol/Kinetic';
-import { Condition } from 'ol/events/condition';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { DragPan } from 'ol/interaction';
+import Kinetic from 'ol/Kinetic';
 import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragpan',

projects/ng-openlayers/src/lib/interactions/dragrotate.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Condition } from 'ol/events/condition';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { DragRotate } from 'ol/interaction';
 import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragrotate',

projects/ng-openlayers/src/lib/interactions/dragrotateandzoom.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Condition } from 'ol/events/condition';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { DragRotateAndZoom } from 'ol/interaction';
 import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragrotateandzoom',

projects/ng-openlayers/src/lib/interactions/dragzoom.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Condition } from 'ol/events/condition';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { DragZoom } from 'ol/interaction';
 import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragzoom',

projects/ng-openlayers/src/lib/interactions/draw.component.ts

@@ -1,13 +1,15 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Collection, Feature } from 'ol';
-import { Condition } from 'ol/events/condition';
-import GeometryType from 'ol/geom/GeometryType';
+import { Component, Input, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core';
+import { MapComponent } from '../map.component';
 import { Draw } from 'ol/interaction';
-import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw';
+import { Collection, Feature } from 'ol';
 import { Vector } from 'ol/source';
 import { Style } from 'ol/style';
+import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw';
 import { StyleFunction } from 'ol/style/Style';
-import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
+import { Type } from 'ol/geom/Geometry';
+import { ObjectEvent } from 'ol/Object';
+import BaseEvent from 'ol/events/Event';
 
 @Component({
   selector: 'aol-interaction-draw',
@@ -23,7 +25,7 @@ export class DrawInteractionComponent implements OnInit, OnDestroy {
   @Input()
   snapTolerance?: number;
   @Input()
-  type: GeometryType;
+  type: Type;
   @Input()
   maxPoints?: number;
   @Input()
@@ -48,13 +50,17 @@ export class DrawInteractionComponent implements OnInit, OnDestroy {
   @Output()
   olChange = new EventEmitter<DrawEvent>();
   @Output()
-  olChangeActive = new EventEmitter<DrawEvent>();
+  olChangeActive = new EventEmitter<ObjectEvent>();
+  @Output()
+  olDrawAbort = new EventEmitter<DrawEvent>();
   @Output()
   drawEnd = new EventEmitter<DrawEvent>();
   @Output()
   drawStart = new EventEmitter<DrawEvent>();
   @Output()
-  propertyChange = new EventEmitter<DrawEvent>();
+  olError = new EventEmitter<BaseEvent>();
+  @Output()
+  propertyChange = new EventEmitter<ObjectEvent>();
 
   instance: Draw;
 
@@ -63,10 +69,12 @@ export class DrawInteractionComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.instance = new Draw(this);
     this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
-    this.instance.on('change:active', (event: DrawEvent) => this.olChangeActive.emit(event));
+    this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
+    this.instance.on('drawabort', (event: DrawEvent) => this.olDrawAbort.emit(event));
     this.instance.on('drawend', (event: DrawEvent) => this.drawEnd.emit(event));
     this.instance.on('drawstart', (event: DrawEvent) => this.drawStart.emit(event));
-    this.instance.on('propertychange', (event: DrawEvent) => this.propertyChange.emit(event));
+    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
+    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
     this.map.instance.addInteraction(this.instance);
   }
 

projects/ng-openlayers/src/lib/interactions/keyboardpan.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { KeyboardPan } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-keyboardpan',
+  template: '',
+})
+export class KeyboardPanInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  duration: number;
+  @Input()
+  pixelDelta: number;
+
+  instance: KeyboardPan;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new KeyboardPan(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/keyboardzoom.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { KeyboardZoom } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-keyboardpan',
+  template: '',
+})
+export class KeyboardZoomInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  duration: number;
+  @Input()
+  delta: number;
+
+  instance: KeyboardZoom;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new KeyboardZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/modify.component.ts

@@ -1,12 +1,15 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Collection, Feature } from 'ol';
-import { Condition } from 'ol/events/condition';
-import { Modify } from 'ol/interaction';
-import { ModifyEvent } from 'ol/interaction/Modify';
-import { Vector } from 'ol/source';
-import { Style } from 'ol/style';
-import { StyleFunction } from 'ol/style/Style';
+import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { MapComponent } from '../map.component';
+import { Modify } from 'ol/interaction';
+import { Collection, Feature } from 'ol';
+import { Style } from 'ol/style';
+import { Vector } from 'ol/source';
+import { ModifyEvent } from 'ol/interaction/Modify';
+import { StyleFunction } from 'ol/style/Style';
+import { Condition } from 'ol/events/condition';
+import { ObjectEvent } from 'ol/Object';
+import { DrawEvent } from 'ol/interaction/Draw';
+import BaseEvent from 'ol/events/Event';
 
 @Component({
   selector: 'aol-interaction-modify',
@@ -29,15 +32,17 @@ export class ModifyInteractionComponent implements OnInit, OnDestroy {
   source?: Vector;
 
   @Output()
-  modifyEnd = new EventEmitter<ModifyEvent>();
+  olChange = new EventEmitter<DrawEvent>();
   @Output()
-  modifyStart = new EventEmitter<ModifyEvent>();
+  olChangeActive = new EventEmitter<ObjectEvent>();
   @Output()
-  olChange = new EventEmitter<ModifyEvent>();
+  olError = new EventEmitter<BaseEvent>();
   @Output()
-  olChangeActive = new EventEmitter<ModifyEvent>();
+  olModifyEnd = new EventEmitter<ModifyEvent>();
   @Output()
-  propertyChange = new EventEmitter<ModifyEvent>();
+  olModifyStart = new EventEmitter<ModifyEvent>();
+  @Output()
+  propertyChange = new EventEmitter<ObjectEvent>();
 
   instance: Modify;
 
@@ -45,11 +50,12 @@ export class ModifyInteractionComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.instance = new Modify(this);
-    this.instance.on('change', (event: ModifyEvent) => this.olChange.emit(event));
-    this.instance.on('change:active', (event: ModifyEvent) => this.olChangeActive.emit(event));
-    this.instance.on('propertychange', (event: ModifyEvent) => this.propertyChange.emit(event));
-    this.instance.on('modifyend', (event: ModifyEvent) => this.modifyEnd.emit(event));
-    this.instance.on('modifystart', (event: ModifyEvent) => this.modifyStart.emit(event));
+    this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
+    this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
+    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
+    this.instance.on('modifyend', (event: ModifyEvent) => this.olModifyEnd.emit(event));
+    this.instance.on('modifystart', (event: ModifyEvent) => this.olModifyStart.emit(event));
+    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
     this.map.instance.addInteraction(this.instance);
   }
 

projects/ng-openlayers/src/lib/interactions/pinchzoom.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { PinchZoom } from 'ol/interaction';
 import { MapComponent } from '../map.component';
 

projects/ng-openlayers/src/lib/interactions/select.component.ts

@@ -1,12 +1,14 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Collection, Feature } from 'ol';
-import { Condition } from 'ol/events/condition';
+import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MapComponent } from '../map.component';
 import { Select } from 'ol/interaction';
-import { FilterFunction, SelectEvent } from 'ol/interaction/Select';
 import { Layer } from 'ol/layer';
 import { Style } from 'ol/style';
+import { Collection, Feature } from 'ol';
+import { SelectEvent, FilterFunction } from 'ol/interaction/Select';
 import { StyleFunction } from 'ol/style/Style';
-import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
+import { ObjectEvent } from 'ol/Object';
+import BaseEvent from 'ol/events/Event';
 
 @Component({
   selector: 'aol-interaction-select',
@@ -33,15 +35,17 @@ export class SelectInteractionComponent implements OnInit, OnDestroy {
   filter?: FilterFunction;
   @Input()
   wrapX?: boolean;
-  @Input()
-  hitTolerance?: number;
 
   @Output()
   olChange = new EventEmitter<SelectEvent>();
   @Output()
-  olSelect = new EventEmitter<SelectEvent>();
+  olChangeActive = new EventEmitter<ObjectEvent>();
   @Output()
-  propertyChange = new EventEmitter<SelectEvent>();
+  olError = new EventEmitter<BaseEvent>();
+  @Output()
+  propertyChange = new EventEmitter<ObjectEvent>();
+  @Output()
+  olSelect = new EventEmitter<SelectEvent>();
 
   instance: Select;
 
@@ -51,9 +55,10 @@ export class SelectInteractionComponent implements OnInit, OnDestroy {
     this.instance = new Select(this);
 
     this.instance.on('change', (event: SelectEvent) => this.olChange.emit(event));
+    this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
+    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
+    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
     this.instance.on('select', (event: SelectEvent) => this.olSelect.emit(event));
-    this.instance.on('propertychange', (event: SelectEvent) => this.propertyChange.emit(event));
-
     this.map.instance.addInteraction(this.instance);
   }
 

projects/ng-openlayers/src/lib/interactions/translate.component.ts

@@ -1,9 +1,11 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Collection, Feature } from 'ol';
+import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Translate } from 'ol/interaction';
-import { TranslateEvent } from 'ol/interaction/Translate';
+import { Collection, Feature } from 'ol';
 import { Layer } from 'ol/layer';
+import { TranslateEvent } from 'ol/interaction/Translate';
 import { MapComponent } from '../map.component';
+import BaseEvent from 'ol/events/Event';
+import { ObjectEvent } from 'ol/Object';
 
 @Component({
   selector: 'aol-interaction-translate',
@@ -18,31 +20,31 @@ export class TranslateInteractionComponent implements OnInit, OnDestroy {
   hitTolerance?: number;
 
   @Output()
-  olChange: EventEmitter<TranslateEvent>;
+  olChange = new EventEmitter<BaseEvent>();
   @Output()
-  propertyChange: EventEmitter<TranslateEvent>;
+  olChangeActive = new EventEmitter<ObjectEvent>();
   @Output()
-  translateEnd: EventEmitter<TranslateEvent>;
+  olError = new EventEmitter<BaseEvent>();
   @Output()
-  translateStart: EventEmitter<TranslateEvent>;
+  propertyChange = new EventEmitter<ObjectEvent>();
   @Output()
-  translating: EventEmitter<TranslateEvent>;
+  translateEnd = new EventEmitter<TranslateEvent>();
+  @Output()
+  translateStart = new EventEmitter<TranslateEvent>();
+  @Output()
+  translating = new EventEmitter<TranslateEvent>();
 
   instance: Translate;
 
-  constructor(private map: MapComponent) {
-    this.olChange = new EventEmitter<TranslateEvent>();
-    this.propertyChange = new EventEmitter<TranslateEvent>();
-    this.translateEnd = new EventEmitter<TranslateEvent>();
-    this.translateStart = new EventEmitter<TranslateEvent>();
-    this.translating = new EventEmitter<TranslateEvent>();
-  }
+  constructor(private map: MapComponent) {}
 
   ngOnInit() {
     this.instance = new Translate(this);
 
-    this.instance.on('change', (event: TranslateEvent) => this.olChange.emit(event));
-    this.instance.on('propertychange', (event: TranslateEvent) => this.propertyChange.emit(event));
+    this.instance.on('change', (event: BaseEvent) => this.olChange.emit(event));
+    this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
+    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
+    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
     this.instance.on('translateend', (event: TranslateEvent) => this.translateEnd.emit(event));
     this.instance.on('translatestart', (event: TranslateEvent) => this.translateStart.emit(event));
     this.instance.on('translating', (event: TranslateEvent) => this.translating.emit(event));

projects/ng-openlayers/src/lib/layers/layer.component.ts

@@ -1,10 +1,11 @@
-import { Directive, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { Event } from 'ol/events';
-import { Extent } from 'ol/extent';
+import { OnDestroy, OnInit, OnChanges, Input, SimpleChanges, Directive } from '@angular/core';
+import Event from 'ol/events/Event';
 import { MapComponent } from '../map.component';
 import { LayerGroupComponent } from './layergroup.component';
+import { Extent } from 'ol/extent';
 
 @Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
   @Input()
   opacity: number;
@@ -24,10 +25,10 @@ export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
   @Input()
   postrender: (evt: Event) => void;
 
-  instance: any;
-  componentType = 'layer';
+  public instance: any;
+  public componentType = 'layer';
 
-  constructor(protected host: MapComponent | LayerGroupComponent) {}
+  protected constructor(protected host: MapComponent | LayerGroupComponent) {}
 
   ngOnInit() {
     if (this.prerender !== null && this.prerender !== undefined) {

projects/ng-openlayers/src/lib/layers/layerimage.component.ts

@@ -1,9 +1,9 @@
 import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
-import { Extent } from 'ol/extent';
 import { Image } from 'ol/layer';
 import { MapComponent } from '../map.component';
 import { LayerComponent } from './layer.component';
 import { LayerGroupComponent } from './layergroup.component';
+import { Extent } from 'ol/extent';
 
 @Component({
   selector: 'aol-layer-image',
@@ -23,8 +23,6 @@ export class LayerImageComponent extends LayerComponent implements OnInit, OnCha
   @Input()
   zIndex: number;
 
-  source: Image;
-
   constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
     super(group || map);
   }

projects/ng-openlayers/src/lib/layers/layertile.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
 import { Tile } from 'ol/layer';
 import { MapComponent } from '../map.component';
 import { LayerComponent } from './layer.component';
@@ -14,8 +14,6 @@ export class LayerTileComponent extends LayerComponent implements OnInit, OnDest
   @Input()
   useInterimTilesOnError: boolean;
 
-  source: Tile;
-
   constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
     super(group || map);
   }

projects/ng-openlayers/src/lib/layers/layervector.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
+import { MapComponent } from '../map.component';
 import { Vector } from 'ol/layer';
 import { Style } from 'ol/style';
 import { StyleFunction } from 'ol/style/Style';
-import { MapComponent } from '../map.component';
 import { LayerComponent } from './layer.component';
 import { LayerGroupComponent } from './layergroup.component';
 
@@ -23,8 +23,6 @@ export class LayerVectorComponent extends LayerComponent implements OnInit, OnDe
   @Input()
   updateWhileInteracting: boolean;
 
-  source: Vector;
-
   constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
     super(group || map);
   }

projects/ng-openlayers/src/lib/layers/layervectortile.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core';
 import { VectorTile } from 'ol/layer';
-import { RenderType } from 'ol/layer/VectorTile';
 import { Feature } from 'ol';
 import { Style } from 'ol/style';
 import { MapComponent } from '../map.component';
@@ -16,7 +15,7 @@ export class LayerVectorTileComponent extends LayerComponent implements OnInit,
   @Input()
   renderBuffer: number;
   @Input()
-  renderMode: RenderType | string;
+  renderMode: any | string;
   /* not marked as optional in the typings */
   @Input()
   renderOrder: (feature1: Feature, feature2: Feature) => number;

projects/ng-openlayers/src/lib/map.component.ts

@@ -0,0 +1,142 @@
+import {
+  Component,
+  OnInit,
+  ElementRef,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+  SimpleChanges,
+  OnChanges,
+} from '@angular/core';
+import { Map } from 'ol';
+import MapBrowserEvent from 'ol/MapBrowserEvent';
+import MapEvent from 'ol/MapEvent';
+import { ObjectEvent } from 'ol/Object';
+import RenderEvent from 'ol/render/Event';
+import { Control } from 'ol/control';
+import { Interaction } from 'ol/interaction';
+import { DrawEvent } from 'ol/interaction/Draw';
+import BaseEvent from 'ol/events/Event';
+
+@Component({
+  selector: 'aol-map',
+  template: `
+    <div [style.width]="width" [style.height]="height"></div>
+    <ng-content></ng-content>
+  `,
+})
+export class MapComponent implements OnInit, AfterViewInit, OnChanges {
+  @Input()
+  width = '100%';
+  @Input()
+  height = '100%';
+  @Input()
+  pixelRatio: number;
+  @Input()
+  keyboardEventTarget: HTMLElement | string;
+  @Input()
+  loadTilesWhileAnimating: boolean;
+  @Input()
+  loadTilesWhileInteracting: boolean;
+  @Input()
+  logo: string | boolean;
+  @Input()
+  renderer: 'canvas' | 'webgl';
+
+  @Output()
+  olChange = new EventEmitter<DrawEvent>();
+  @Output()
+  olChangeLayerGroup = new EventEmitter<ObjectEvent>();
+  @Output()
+  olChangeSize = new EventEmitter<ObjectEvent>();
+  @Output()
+  olChangeTarget = new EventEmitter<ObjectEvent>();
+  @Output()
+  olChangeView = new EventEmitter<ObjectEvent>();
+  @Output()
+  olClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
+  @Output()
+  dblClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
+  @Output()
+  olError = new EventEmitter<BaseEvent>();
+  @Output()
+  loadEnd = new EventEmitter<MapEvent>();
+  @Output()
+  loadStart = new EventEmitter<MapEvent>();
+  @Output()
+  moveEnd = new EventEmitter<MapEvent>();
+  @Output()
+  moveStart = new EventEmitter<MapEvent>();
+  @Output()
+  pointerDrag = new EventEmitter<MapBrowserEvent<MouseEvent>>();
+  @Output()
+  pointerMove = new EventEmitter<MapBrowserEvent<MouseEvent>>();
+  @Output()
+  olPostCompose = new EventEmitter<RenderEvent>();
+  @Output()
+  olPostRender = new EventEmitter<RenderEvent>();
+  @Output()
+  olPreCompose = new EventEmitter<RenderEvent>();
+  @Output()
+  olPropertyChange = new EventEmitter<ObjectEvent>();
+  @Output()
+  postRender = new EventEmitter<MapEvent>();
+  @Output()
+  propertyChange = new EventEmitter<ObjectEvent>();
+  @Output()
+  singleClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
+
+  public instance: Map;
+  public componentType = 'map';
+
+  // we pass empty arrays to not get default controls/interactions because we have our own directives
+  controls: Control[] = [];
+  interactions: Interaction[] = [];
+
+  constructor(private host: ElementRef) {}
+
+  ngOnInit() {
+    // console.log('creating ol.Map instance with:', this);
+    this.instance = new Map(this);
+    this.instance.setTarget(this.host.nativeElement.firstElementChild);
+    this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
+    this.instance.on('change:layergroup', (event: ObjectEvent) => this.olChangeLayerGroup.emit(event));
+    this.instance.on('change:size', (event: ObjectEvent) => this.olChangeSize.emit(event));
+    this.instance.on('change:target', (event: ObjectEvent) => this.olChangeTarget.emit(event));
+    this.instance.on('change:view', (event: ObjectEvent) => this.olChangeView.emit(event));
+    this.instance.on('click', (event: MapBrowserEvent<MouseEvent>) => this.olClick.emit(event));
+    this.instance.on('dblclick', (event: MapBrowserEvent<MouseEvent>) => this.dblClick.emit(event));
+    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
+    this.instance.on('loadend', (event: MapEvent) => this.loadEnd.emit(event));
+    this.instance.on('loadstart', (event: MapEvent) => this.loadStart.emit(event));
+    this.instance.on('moveend', (event: MapEvent) => this.moveEnd.emit(event));
+    this.instance.on('movestart', (event: MapEvent) => this.moveStart.emit(event));
+    this.instance.on('pointerdrag', (event: MapBrowserEvent<MouseEvent>) => this.pointerDrag.emit(event));
+    this.instance.on('pointermove', (event: MapBrowserEvent<MouseEvent>) => this.pointerMove.emit(event));
+    this.instance.on('postcompose', (event: RenderEvent) => this.olPostCompose.emit(event));
+    this.instance.on('postrender', (event: RenderEvent) => this.olPostRender.emit(event));
+    this.instance.on('postrender', (event: MapEvent) => this.postRender.emit(event));
+    this.instance.on('precompose', (event: RenderEvent) => this.olPreCompose.emit(event));
+    this.instance.on('propertychange', (event: ObjectEvent) => this.olPropertyChange.emit(event));
+    this.instance.on('singleclick', (event: MapBrowserEvent<MouseEvent>) => this.singleClick.emit(event));
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const properties: { [index: string]: any } = {};
+    if (!this.instance) {
+      return;
+    }
+    for (const key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        properties[key] = changes[key].currentValue;
+      }
+    }
+    // console.log('changes detected in aol-map, setting new properties: ', properties);
+    this.instance.setProperties(properties, false);
+  }
+
+  ngAfterViewInit() {
+    this.instance.updateSize();
+  }
+}

projects/ng-openlayers/src/lib/overlay.component.ts

@@ -1,8 +1,7 @@
 import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
-import { Overlay, PanOptions } from 'ol';
-import OverlayPositioning from 'ol/OverlayPositioning';
-import { ContentComponent } from './content.component';
 import { MapComponent } from './map.component';
+import Overlay, { PanOptions, Positioning } from 'ol/Overlay';
+import { ContentComponent } from './content.component';
 
 @Component({
   selector: 'aol-overlay',
@@ -17,7 +16,7 @@ export class OverlayComponent implements OnInit, OnDestroy {
   @Input()
   offset: number[];
   @Input()
-  positioning: OverlayPositioning | string;
+  positioning: Positioning;
   @Input()
   stopEvent: boolean;
   @Input()
@@ -31,7 +30,7 @@ export class OverlayComponent implements OnInit, OnDestroy {
 
   componentType = 'overlay';
   instance: Overlay;
-  element: Element;
+  element: HTMLElement;
 
   constructor(private map: MapComponent) {}
 

projects/ng-openlayers/src/lib/sources/bingmaps.component.ts

@@ -1,8 +1,8 @@
 import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
-import { LoadFunction } from 'ol/Tile';
 import { BingMaps } from 'ol/source';
-import { LayerTileComponent } from '../layers/layertile.component';
 import { SourceComponent } from './source.component';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { LoadFunction } from 'ol/Tile';
 
 @Component({
   selector: 'aol-source-bingmaps',

projects/ng-openlayers/src/lib/sources/cluster.component.ts

@@ -29,10 +29,11 @@ export class SourceClusterComponent extends SourceComponent implements AfterCont
   @Input()
   wrapX?: boolean;
 
-  @ContentChild(SourceVectorComponent)
+  @ContentChild(SourceVectorComponent, { static: false })
   sourceVectorComponent: SourceVectorComponent;
-  source: Vector;
+
   instance: Cluster;
+  source: Vector;
 
   constructor(@Host() layer: LayerVectorComponent) {
     super(layer);

projects/ng-openlayers/src/lib/sources/geojson.component.ts

@@ -1,10 +1,10 @@
 import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
-import { Feature } from 'ol';
-import { GeoJSON } from 'ol/format';
-import { ProjectionLike } from 'ol/proj';
-import { Vector } from 'ol/source';
 import { LayerVectorComponent } from '../layers/layervector.component';
 import { SourceComponent } from './source.component';
+import FeatureFormat from 'ol/format/Feature';
+import { Vector } from 'ol/source';
+import { GeoJSON } from 'ol/format';
+import { ProjectionLike } from 'ol/proj';
 
 @Component({
   selector: 'aol-source-geojson',
@@ -22,7 +22,7 @@ export class SourceGeoJSONComponent extends SourceComponent implements OnInit {
   url: string;
 
   instance: Vector;
-  format: Feature;
+  format: FeatureFormat;
 
   constructor(@Host() layer: LayerVectorComponent) {
     super(layer);

projects/ng-openlayers/src/lib/sources/imagearcgisrest.component.ts

@@ -9,13 +9,13 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core';
-import { LoadFunction } from 'ol/Image';
-import { ProjectionLike } from 'ol/proj';
-import { ImageArcGISRest } from 'ol/source';
-import { ImageSourceEvent } from 'ol/source/Image';
-import { AttributionLike } from 'ol/source/Source';
+import ImageArcGISRest from 'ol/source/ImageArcGISRest';
 import { LayerImageComponent } from '../layers/layerimage.component';
 import { SourceComponent } from './source.component';
+import { ProjectionLike } from 'ol/proj';
+import { AttributionLike } from 'ol/source/Source';
+import { LoadFunction } from 'ol/Image';
+import { ImageSourceEvent } from 'ol/source/Image';
 
 @Component({
   selector: 'aol-source-imagearcgisrest',
@@ -25,7 +25,7 @@ import { SourceComponent } from './source.component';
 export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit, OnChanges {
   @Input() projection: ProjectionLike | string;
   @Input() url: string;
-  @Input() attributions: AttributionLike[];
+  @Input() attributions: AttributionLike;
   @Input() crossOrigin?: string;
   @Input() imageLoadFunction?: LoadFunction;
   @Input() params?: { [k: string]: any };

projects/ng-openlayers/src/lib/sources/imagestatic.component.ts

@@ -1,23 +1,23 @@
 import {
   Component,
-  EventEmitter,
   Host,
   Input,
-  OnChanges,
-  OnInit,
-  Output,
-  SimpleChanges,
   forwardRef,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  OnInit,
 } from '@angular/core';
-import { LoadFunction } from 'ol/Image';
-import { Extent } from 'ol/extent';
-import { ProjectionLike } from 'ol/proj';
-import { Size } from 'ol/size';
 import { ImageStatic } from 'ol/source';
-import { ImageSourceEvent } from 'ol/source/Image';
-import { AttributionLike } from 'ol/source/Source';
-import { LayerImageComponent } from '../layers/layerimage.component';
 import { SourceComponent } from './source.component';
+import { LayerImageComponent } from '../layers/layerimage.component';
+import { ProjectionLike } from 'ol/proj';
+import { Extent } from 'ol/extent';
+import { AttributionLike } from 'ol/source/Source';
+import { LoadFunction } from 'ol/Image';
+import { Size } from 'ol/size';
+import { ImageSourceEvent } from 'ol/source/Image';
 
 @Component({
   selector: 'aol-source-imagestatic',

projects/ng-openlayers/src/lib/sources/imagewms.component.ts

@@ -16,6 +16,7 @@ import { ProjectionLike } from 'ol/proj';
 import { AttributionLike } from 'ol/source/Source';
 import { LoadFunction } from 'ol/Image';
 import { ImageSourceEvent } from 'ol/source/Image';
+import { ServerType } from 'ol/source/WMSServerType';
 
 @Component({
   selector: 'aol-source-imagewms',
@@ -30,7 +31,7 @@ export class SourceImageWMSComponent extends SourceComponent implements OnChange
   @Input()
   hidpi: boolean;
   @Input()
-  serverType: string;
+  serverType: ServerType;
   @Input()
   imageLoadFunction?: LoadFunction;
   @Input()

projects/ng-openlayers/src/lib/sources/osm.component.ts

@@ -33,11 +33,11 @@ export class SourceOsmComponent extends SourceXYZComponent implements AfterConte
   wrapX: boolean;
 
   @Output()
-  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  tileLoadStart = new EventEmitter<TileSourceEvent>();
   @Output()
-  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  tileLoadEnd = new EventEmitter<TileSourceEvent>();
   @Output()
-  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  tileLoadError = new EventEmitter<TileSourceEvent>();
 
   instance: OSM;
 
@@ -53,12 +53,10 @@ export class SourceOsmComponent extends SourceXYZComponent implements AfterConte
     if (this.tileGridXYZ) {
       this.tileGrid = this.tileGridXYZ.instance;
     }
-
     this.instance = new OSM(this);
-
     this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
     this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
     this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
-    this._register(this.instance);
+    this.register(this.instance);
   }
 }

projects/ng-openlayers/src/lib/sources/raster.component.ts

@@ -9,7 +9,7 @@ import {
   Output,
 } from '@angular/core';
 import { Raster, Source } from 'ol/source';
-import { Operation, RasterOperationType, RasterSourceEvent } from 'ol/source/Raster';
+import { Operation, RasterSourceEvent } from 'ol/source/Raster';
 
 import { LayerImageComponent } from '../layers/layerimage.component';
 import { SourceComponent } from './source.component';
@@ -32,21 +32,17 @@ export class SourceRasterComponent extends SourceComponent implements AfterConte
   @Input()
   lib?: any;
   @Input()
-  operationType?: RasterOperationType;
+  operationType?: 'pixel' | 'image';
 
   @Output()
-  beforeOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();
+  beforeOperations = new EventEmitter<RasterSourceEvent>();
   @Output()
-  afterOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();
+  afterOperations = new EventEmitter<RasterSourceEvent>();
 
   instance: Raster;
   sources: Source[] = [];
 
-  constructor(@Host() layer: LayerImageComponent) {
-    super(layer);
-  }
-
-  @ContentChild(SourceComponent)
+  @ContentChild(SourceComponent, { static: false })
   set source(sourceComponent: SourceComponent) {
     this.sources = [sourceComponent.instance];
     if (this.instance) {
@@ -55,6 +51,10 @@ export class SourceRasterComponent extends SourceComponent implements AfterConte
     }
   }
 
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
   ngAfterContentInit() {
     this.init();
   }
@@ -63,6 +63,6 @@ export class SourceRasterComponent extends SourceComponent implements AfterConte
     this.instance = new Raster(this);
     this.instance.on('beforeoperations', (event: RasterSourceEvent) => this.beforeOperations.emit(event));
     this.instance.on('afteroperations', (event: RasterSourceEvent) => this.afterOperations.emit(event));
-    this._register(this.instance);
+    this.register(this.instance);
   }
 }

projects/ng-openlayers/src/lib/sources/source.component.ts

@@ -1,9 +1,10 @@
-import { Directive, Input, OnDestroy } from '@angular/core';
-import { Source } from 'ol';
+import { Input, OnDestroy, Directive } from '@angular/core';
+import Source from 'ol/source/Source';
 
 import { LayerComponent } from '../layers/layer.component';
 
 @Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class SourceComponent implements OnDestroy {
   @Input()
   attributions: any;
@@ -11,7 +12,7 @@ export abstract class SourceComponent implements OnDestroy {
   public instance: Source;
   public componentType = 'source';
 
-  constructor(protected host: LayerComponent) {}
+  protected constructor(protected host: LayerComponent) {}
 
   ngOnDestroy() {
     if (this.host && this.host.instance) {
@@ -19,7 +20,7 @@ export abstract class SourceComponent implements OnDestroy {
     }
   }
 
-  protected _register(s: Source) {
+  protected register(s: Source) {
     if (this.host) {
       this.host.instance.setSource(s);
     }

projects/ng-openlayers/src/lib/sources/tilewms.component.ts

@@ -2,8 +2,9 @@ import { Component, Host, Input, OnChanges, OnInit, forwardRef, SimpleChanges }
 import { LayerTileComponent } from '../layers/layertile.component';
 import { SourceComponent } from './source.component';
 import { TileWMS } from 'ol/source';
-import { TileGrid } from 'ol/tilegrid';
+import TileGrid from 'ol/tilegrid/TileGrid';
 import { LoadFunction } from 'ol/Tile';
+import { ServerType } from 'ol/source/WMSServerType';
 
 @Component({
   selector: 'aol-source-tilewms',
@@ -26,7 +27,7 @@ export class SourceTileWMSComponent extends SourceComponent implements OnChanges
   @Input()
   reprojectionErrorThreshold: number;
   @Input()
-  serverType: string;
+  serverType: ServerType;
   @Input()
   tileGrid: TileGrid;
   @Input()

projects/ng-openlayers/src/lib/sources/tilewmts.component.ts

@@ -13,12 +13,12 @@ import {
 import { LayerTileComponent } from '../layers/layertile.component';
 import { SourceComponent } from './source.component';
 import { TileGridWMTSComponent } from '../tilegridwmts.component';
-import { WMTS } from 'ol/source';
-import { WMTS as TileGridWMTS } from 'ol/tilegrid';
-import { WMTSRequestEncoding } from 'ol/source';
+import { WMTS as SourceWMTS } from 'ol/source';
+import WMTS from 'ol/tilegrid/WMTS';
 import { ProjectionLike } from 'ol/proj';
 import { LoadFunction } from 'ol/Tile';
 import { TileSourceEvent } from 'ol/source/Tile';
+import { RequestEncoding } from 'ol/source/WMTS';
 
 @Component({
   selector: 'aol-source-tilewmts',
@@ -31,13 +31,13 @@ export class SourceTileWMTSComponent extends SourceComponent implements AfterCon
   @Input()
   crossOrigin?: string;
   @Input()
-  tileGrid: TileGridWMTS;
+  tileGrid: WMTS;
   @Input()
   projection: ProjectionLike;
   @Input()
   reprojectionErrorThreshold?: number;
   @Input()
-  requestEncoding?: WMTSRequestEncoding | string;
+  requestEncoding?: RequestEncoding | undefined;
   @Input()
   layer: string;
   @Input()
@@ -64,16 +64,16 @@ export class SourceTileWMTSComponent extends SourceComponent implements AfterCon
   wrapX?: boolean;
 
   @Output()
-  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  tileLoadStart = new EventEmitter<TileSourceEvent>();
   @Output()
-  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  tileLoadEnd = new EventEmitter<TileSourceEvent>();
   @Output()
-  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  tileLoadError = new EventEmitter<TileSourceEvent>();
 
-  @ContentChild(TileGridWMTSComponent)
+  @ContentChild(TileGridWMTSComponent, { static: false })
   tileGridWMTS: TileGridWMTSComponent;
 
-  instance: WMTS;
+  instance: SourceWMTS;
 
   constructor(@Host() layer: LayerTileComponent) {
     super(layer);
@@ -101,7 +101,7 @@ export class SourceTileWMTSComponent extends SourceComponent implements AfterCon
   }
 
   setLayerSource(): void {
-    this.instance = new WMTS(this);
+    this.instance = new SourceWMTS(this);
     this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
     this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
     this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));

projects/ng-openlayers/src/lib/sources/utfgrid.component.ts

@@ -2,6 +2,7 @@ import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
 import { SourceComponent } from './source.component';
 import { LayerTileComponent } from '../layers/layertile.component';
 import { UTFGrid } from 'ol/source';
+import { Config } from 'ol/source/TileJSON';
 
 @Component({
   selector: 'aol-source-utfgrid',
@@ -9,7 +10,7 @@ import { UTFGrid } from 'ol/source';
   providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceUTFGridComponent) }],
 })
 export class SourceUTFGridComponent extends SourceComponent implements OnInit {
-  @Input() tileJSON: JSON;
+  @Input() tileJSON: Config;
   @Input() url: string;
 
   instance: UTFGrid;

projects/ng-openlayers/src/lib/sources/vectortile.component.ts

@@ -1,5 +1,5 @@
 import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core';
-import { VectorTile } from 'ol';
+import { VectorTile } from 'ol/source';
 import Feature from 'ol/format/Feature';
 import TileGrid from 'ol/tilegrid/TileGrid';
 import { LayerVectorTileComponent } from '../layers/layervectortile.component';
@@ -32,16 +32,15 @@ export class SourceVectorTileComponent extends SourceComponent implements AfterC
   @Input()
   wrapX: boolean;
 
-  @ContentChild(FormatComponent)
+  @ContentChild(FormatComponent, { static: false })
   formatComponent: FormatComponent;
-  @ContentChild(TileGridComponent)
+  @ContentChild(TileGridComponent, { static: false })
   tileGridComponent: TileGridComponent;
 
+  public instance: VectorTile;
   format: Feature;
   tileGrid: TileGrid;
 
-  instance: VectorTile;
-
   constructor(@Host() layer: LayerVectorTileComponent) {
     super(layer);
   }

projects/ng-openlayers/src/lib/sources/xyz.component.ts

@@ -58,15 +58,15 @@ export class SourceXYZComponent extends SourceComponent implements AfterContentI
   @Input()
   wrapX: boolean;
 
-  @ContentChild(TileGridComponent)
+  @ContentChild(TileGridComponent, { static: false })
   tileGridXYZ: TileGridComponent;
 
   @Output()
-  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  tileLoadStart = new EventEmitter<TileSourceEvent>();
   @Output()
-  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  tileLoadEnd = new EventEmitter<TileSourceEvent>();
   @Output()
-  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  tileLoadError = new EventEmitter<TileSourceEvent>();
 
   instance: XYZ;
 
@@ -110,6 +110,6 @@ export class SourceXYZComponent extends SourceComponent implements AfterContentI
     this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
     this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
 
-    this._register(this.instance);
+    this.register(this.instance);
   }
 }

projects/ng-openlayers/src/lib/styles/circle.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { AtlasManager, Circle, Fill, Stroke } from 'ol/style';
+import { Circle, Fill, Stroke } from 'ol/style';
 import { StyleComponent } from './style.component';
 
 @Component({
@@ -15,11 +15,9 @@ export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDest
   snapToPixel: boolean;
   @Input()
   stroke: Stroke;
-  @Input()
-  atlasManager: AtlasManager;
 
-  componentType = 'style-circle';
-  instance: Circle;
+  public componentType = 'style-circle';
+  public instance: Circle;
 
   constructor(@Host() private host: StyleComponent) {}
 

projects/ng-openlayers/src/lib/styles/fill.component.ts

@@ -14,9 +14,8 @@ export class StyleFillComponent implements OnInit, OnChanges {
   @Input()
   color: Color | ColorLike;
 
-  instance: Fill;
-  /* the typings do not have the setters */
-  private host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/ any;
+  public instance: Fill;
+  private readonly host: StyleComponent | StyleCircleComponent | StyleTextComponent;
 
   constructor(
     @Optional() styleHost: StyleComponent,
@@ -48,12 +47,11 @@ export class StyleFillComponent implements OnInit, OnChanges {
         this.host.instance.setFill(this.instance);
         break;
       case 'style-circle':
-        this.host.fill = this.instance;
+        (this.host as StyleCircleComponent).fill = this.instance;
         // console.log('setting ol.style.circle instance\'s fill:', this.host);
         break;
       default:
         throw new Error('unknown host type: ' + this.host);
-      // break;
     }
   }
 

projects/ng-openlayers/src/lib/styles/icon.component.ts

@@ -1,8 +1,11 @@
 import { Component, Input, Host, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { Icon } from 'ol/style';
-import IconAnchorUnits from 'ol/style/IconAnchorUnits';
-import IconOrigin from 'ol/style/IconOrigin';
+
+// TODO https://github.com/openlayers/openlayers/issues/12694
+// import IconAnchorUnits from 'ol/style/IconAnchorUnits';
+// import IconOrigin from 'ol/style/IconOrigin';
 import { StyleComponent } from './style.component';
+import { IconAnchorUnits, IconOrigin } from 'ol/style/Icon';
 
 @Component({
   selector: 'aol-style-icon',
@@ -22,7 +25,7 @@ export class StyleIconComponent implements OnInit, OnChanges {
   @Input()
   crossOrigin: IconOrigin;
   @Input()
-  img: string;
+  img: HTMLCanvasElement | HTMLImageElement;
   @Input()
   offset: [number, number];
   @Input()
@@ -44,7 +47,7 @@ export class StyleIconComponent implements OnInit, OnChanges {
   @Input()
   src: string;
 
-  instance: Icon;
+  public instance: Icon;
 
   constructor(@Host() private host: StyleComponent) {}
 

projects/ng-openlayers/src/lib/styles/stroke.component.ts

@@ -14,19 +14,19 @@ export class StyleStrokeComponent implements OnInit, OnChanges {
   @Input()
   color: Color | ColorLike;
   @Input()
-  lineCap: string;
+  lineCap: CanvasLineCap | undefined;
   @Input()
   lineDash: number[];
   @Input()
-  lineJoin: string;
+  lineJoin: CanvasLineJoin | undefined;
   @Input()
   miterLimit: number;
   @Input()
   width: number;
 
-  instance: Stroke;
+  public instance: Stroke;
   /* the typings do not have the setters */
-  host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/ any;
+  private readonly host: StyleComponent | StyleCircleComponent | StyleTextComponent;
 
   constructor(
     @Optional() styleHost: StyleComponent,
@@ -58,7 +58,7 @@ export class StyleStrokeComponent implements OnInit, OnChanges {
         this.host.instance.setStroke(this.instance);
         break;
       case 'style-circle':
-        this.host.stroke = this.instance;
+        (this.host as StyleCircleComponent).stroke = this.instance;
         // console.log('setting ol.style.circle instance\'s stroke:', this.host);
         break;
       default:

projects/ng-openlayers/src/lib/styles/style.component.ts

@@ -23,9 +23,9 @@ export class StyleComponent implements OnInit {
   @Input()
   zIndex: number;
 
-  instance: Style;
-  componentType = 'style';
-  private host: FeatureComponent | LayerVectorComponent;
+  public instance: Style;
+  public componentType = 'style';
+  private readonly host: FeatureComponent | LayerVectorComponent;
 
   constructor(@Optional() featureHost: FeatureComponent, @Optional() layerHost: LayerVectorComponent) {
     // console.log('creating aol-style');

projects/ng-openlayers/src/lib/styles/text.component.ts

@@ -22,12 +22,12 @@ export class StyleTextComponent implements OnInit, OnChanges {
   @Input()
   text: string | undefined;
   @Input()
-  textAlign: string | undefined;
+  textAlign: CanvasTextAlign | undefined;
   @Input()
   textBaseLine: string | undefined;
 
-  instance: Text;
-  componentType = 'style-text';
+  public instance: Text;
+  public componentType = 'style-text';
 
   constructor(@Optional() private host: StyleComponent) {
     if (!host) {
@@ -73,4 +73,6 @@ export class StyleTextComponent implements OnInit, OnChanges {
     this.host.update();
     // console.log('changes detected in aol-style-text, setting new properties: ', changes);
   }
+
+  update() {}
 }

projects/ng-openlayers/src/lib/tilegridwmts.component.ts

@@ -20,7 +20,7 @@ export class TileGridWMTSComponent extends TileGridComponent implements OnInit {
   @Input()
   sizes?: Size[];
   @Input()
-  tileSizes?: (number | Size)[];
+  tileSizes?: Size[];
   @Input()
   widths?: number[];