Initial editor functionality and data bindings

src/app/directives/directives.module.ts

@@ -0,0 +1,9 @@
+import {NgModule} from '@angular/core';
+import {DomChangeDirective} from './dom-change.directive';
+
+@NgModule({
+    imports: [],
+    exports: [DomChangeDirective],
+    declarations: [DomChangeDirective],
+})
+export class DirectivesModule {}

src/app/directives/dom-change.directive.ts

@@ -0,0 +1,30 @@
+import {Directive, ElementRef, EventEmitter, OnDestroy, Output} from '@angular/core';
+
+@Directive({
+    selector: '[appDomChange]'
+})
+export class DomChangeDirective implements OnDestroy {
+    private changes: MutationObserver;
+
+    @Output()
+    public domChange = new EventEmitter();
+
+    constructor(private elementRef: ElementRef) {
+        const element = this.elementRef.nativeElement;
+
+        this.changes = new MutationObserver((mutations) => {
+            mutations.forEach(mutation => this.domChange.emit(mutation));
+        });
+
+        this.changes.observe(element, {
+            attributes: true,
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    }
+
+    ngOnDestroy() {
+        this.changes.disconnect();
+    }
+}