#127 Fixed issues with AOT COMPILATION for Angular 6+;

src/inline-editor.component.html

@@ -1,16 +1,15 @@
-<div id="inlineEditWrapper">
+<div id="inlineEditWrapper" [ngClass]="{'is-editing': state.isEditing()}">
   <a [ngClass]="{'editable-empty': state.isEmpty(), 'c-inline-editor': true }" (click)="!config.editOnClick || edit()" [hidden]="state.isEditing() && !config.disabled">{{ showText() }}</a>
   <div class="c-inline-editor inlineEditForm form-inline" [hidden]="!state.isEditing() || config.disabled">
     <div class="form-group">
       <div #container></div>
       <span *ngIf="!config.hideButtons" class="c-inline-editor inline-editor-button-group">
-      <button id="inline-editor-button-save" class="btn btn-xs btn-primary c-inline-editor"
-          (click)="saveAndClose({ event: $event, state: service.getState() })">
+      <button class="btn btn-xs btn-primary c-inline-editor"
+          (click)="saveAndClose({ event: $event, state: service.getOptions() })">
           <span class="fa fa-check"></span>
       </button>
-      <button class="btn btn-xs btn-danger c-inline-editor" (click)="cancel({ event: $event, state: service.getState() })"><span class="fa fa-remove"></span> </button>
+      <button class="btn btn-xs btn-danger c-inline-editor" (click)="cancel({ event: $event, state: service.getOptions() })"><span class="fa fa-remove"></span> </button>
       </span>
-
     </div>
   </div>
 </div>

src/inline-editor.service.ts

@@ -1,7 +1,7 @@
 import { InlineConfig } from "./types/inline-configs";
 import { Subscription } from "rxjs/Subscription";
 import { Events } from "./types/inline-editor-events.class";
-import { InlineEditorState } from "./types/inline-editor-state.class";
+import { InlineEditorState, InlineEditorStateOptions } from "./types/inline-editor-state.class";
 import { EventEmitter } from "@angular/core";
 
 export class InlineEditorService {
@@ -32,6 +32,10 @@ export class InlineEditorService {
         return this.state.clone();
     }
 
+    public getOptions(): InlineEditorStateOptions {
+        return this.state.clone().getState();
+    }
+
     public destroy() {
         Object.values(this.subscriptions).forEach(subscription => subscription.unsubscribe());
     }

src/inputs/input.component.css

@@ -1,13 +1,16 @@
-a {
-    text-decoration: none;
-    color: #428bca;
-    border-bottom: dashed 1px #428bca;
-    cursor: pointer;
-    line-height: 2;
-    margin-right: 5px;
-    margin-left: 5px;
+:not([class='is-editing']) a.c-inline-editor {
+  text-decoration: none;
+  color: #428bca;
+  border-bottom: dashed 1px #428bca;
+  cursor: pointer;
+  line-height: 2;
+  margin-right: 5px;
+  margin-left: 5px;
 }
 
+.btn {
+  margin-left:5px;
+}
 
 /* editable-empty */
 

src/themes/bootstrap.css

@@ -1,52 +1,57 @@
-a.c-inline-editor {
-  text-decoration: none;
-  color: #428bca;
-  border-bottom: dashed 1px #428bca;
-  cursor: pointer;
-  line-height: 2;
-  margin-right: 5px;
-  margin-left: 5px;
+:not([class='is-editing']) a.c-inline-editor {
+    text-decoration: none;
+    color: #428bca;
+    border-bottom: dashed 1px #428bca;
+    cursor: pointer;
+    line-height: 2;
+    margin-right: 5px;
+    margin-left: 5px;
 }
+
+.btn {
+    margin-left: 5px;
+}
+
 .c-inline-editor.editable-empty,
 .c-inline-editor.editable-empty:hover,
 .c-inline-editor.editable-empty:focus,
 .c-inline-editor.a.editable-empty,
 .c-inline-editor.a.editable-empty:hover,
 .c-inline-editor.a.editable-empty:focus {
-  font-style: italic;
-  color: #DD1144;
-  text-decoration: none;
+    font-style: italic;
+    color: #DD1144;
+    text-decoration: none;
 }
 
 .c-inline-editor.inlineEditForm {
-  display: inline-block;
-  white-space: nowrap;
-  margin: 0;
-}
-
-#inlineEditWrapper {
-  display: inline-block;
+    display: inline-block;
+    white-space: nowrap;
+    margin: 0;
 }
 
 .c-inline-editor.inlineEditForm input,
 .c-inline-editor.select {
-  width: auto;
-  display: inline;
+    width: auto;
+    display: inline;
 }
 
 .c-inline-editor.inline-editor-button-group {
-  display: inline-block;
+    display: inline-block;
 }
 
 .c-inline-editor.editInvalid {
-  color: #a94442;
-  margin-bottom: 0;
+    color: #a94442;
+    margin-bottom: 0;
 }
 
 .c-inline-editor.error {
-  border-color: #a94442;
+    border-color: #a94442;
+}
+
+.c-inline-editor[hidden] {
+    display: none;
 }
 
-[hidden].c-inline-editor {
-  display: none;
+#inlineEditWrapper {
+    display: inline-block;
 }