diff --git a/ngx-loading-control.component.ts b/ngx-loading-control.component.ts
new file mode 100644
index 0000000..53424df
--- /dev/null
+++ b/ngx-loading-control.component.ts
@@ -0,0 +1,36 @@
+/// <reference path="../../node_modules/@types/leaflet-loading/index.d.ts" />
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import {Map, Control, LoadingOptions} from 'leaflet';
+import '../../../../node_modules/leaflet-loading/src/Control.Loading.js'
+
+@Component({
+  selector: 'leaflet-loading-control',
+  template: '',
+})
+export class NgxLoadingControlComponent implements OnInit, OnDestroy {
+
+  private _map: Map;
+  public loading: Control.Loading;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  ngOnDestroy() {
+    this._map.removeControl(this.loading);
+  }
+
+  @Input() options: LoadingOptions= {};
+
+  @Input() set map(map: Map){
+    if (map) {
+      this._map = map;
+      this.loading = new Control.Loading(this.options);
+      this.loading.addTo(map);
+    }
+  }
+  get map(): Map {
+    return this._map
+  }
+}
diff --git a/package.json b/package.json
index 3e45808..34f01a3 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,14 @@
 {
   "name": "@runette/ngx-leaflet-loading",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "author": "Paul Harwood",
   "description": "Angular wrapper for the Leaflet.loading control",
   "keywords": [
     "angular",
     "leaflet",
     "control",
-    "loading"
+    "loading",
+    "leaflet-loading"
   ],
   "homepage": "https://github.com/runette/ngx-leaflet-loading",
   "bugs": "https://github.com/runette/ngx-leaflet-loading",