Added directive instead of using *ngIf. Updated demo.

README.md

@@ -1,2 +1,128 @@
-# Angular Monaco Editor Loader
-[![Build Status](https://travis-ci.org/leolorenzoluis/xyz.MonacoEditorLoader.svg?branch=master)](https://travis-ci.org/leolorenzoluis/xyz.MonacoEditorLoader)
+# 🎉🎉🎉 Angular Monaco Editor Loader 🎉🎉🎉
+
+[![Build Status](https://travis-ci.org/leolorenzoluis/xyz.loadMonacoEditorLoader.svg?branch=master)](https://travis-ci.org/leolorenzoluis/xyz.loadMonacoEditorLoader)
+
+An easy to use Monaco Editor Loader Service for Angular 2 and 4! Just add `*loadMonacoEditor` in your HTML Element, and you don't have to worry about timing issues!
+
+```
+<div *loadMonacoEditor id="container"></div> 
+```
+
+# Usage
+
+Easy to install with the following command:
+
+```
+npm i @abc.xyz/angular-monaco-editor-loader
+```
+
+In your component's module or app module. Import the following:
+
+```
+import { loadMonacoEditorLoaderModule, loadMonacoEditorLoaderService } from '@abc.xyz/angular-monaco-editor-loader';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    loadMonacoEditorComponent /* Your custom component */
+  ],
+  imports: [
+    BrowserModule,
+    loadMonacoEditorLoaderModule <-- Insert This
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+
+```
+Just add `*loadMonacoEditor`, so with your custom component where you plan to create your own monaco component. Just add the following:
+
+```
+<monaco-editor *loadMonacoEditor></monaco-editor>
+```
+
+And in my custom component where I want to host `Monaco Editor` I just do the following like I expect the Monaco library to be loaded at this point:
+
+```
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'monaco-editor',
+  templateUrl: './monaco-editor.component.html',
+  styleUrls: ['./monaco-editor.component.css']
+})
+export class loadMonacoEditorComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: true,
+      noSyntaxValidation: false
+    });
+
+    // compiler options
+    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.ES2016,
+      allowNonTsExtensions: true
+    });
+
+    // extra libraries
+    monaco.languages.typescript.javascriptDefaults.addExtraLib([
+      'declare class Facts {',
+      '    /**',
+      '     * Returns the next fact',
+      '     */',
+      '    static next():string',
+      '}',
+    ].join('\n'), 'filename/facts.d.ts');
+
+    var jsCode = [
+      '"use strict";',
+      '',
+      "class Chuck {",
+      "    greet() {",
+      "        return Facts.next();",
+      "    }",
+      "}"
+    ].join('\n');
+
+    monaco.editor.create(document.getElementById("container"), {
+      value: jsCode,
+      language: "javascript"
+    });
+  }
+
+}
+```
+
+And that's it! No `timeouts`! No `then`! It just goes with the correct flow in Angular!
+
+# Motivation
+
+I did not want to clutter my component or code with `timeouts` or `then` to determine if Monaco has loaded! I also wanna utilize `ReactiveJS` when dealing with these kind of stuff.
+
+Most of the code that was found [here](https://github.com/Microsoft/monaco-editor/issues/18) just wasn't the right timing when to check if Monaco is already loaded. 
+
+Sometimes I see hacks from [Covalent](https://github.com/Teradata/covalent-code-editor/blob/develop/src/platform/code-editor/code-editor.component.ts) such as adding `timeouts`. So many timeouts everywhere!
+
+```
+        if (this._webview) {
+            if (this._webview.send !== undefined) {
+                // don't want to keep sending content if event came from IPC, infinite loop
+                if (!this._fromEditor) {
+                    this._webview.send('setEditorContent', value);
+                }
+                this.onEditorValueChange.emit(undefined);
+                this.onChange.emit(undefined);
+                this.propagateChange(this._value);
+                this._fromEditor = false;
+            } else {
+                // Editor is not loaded yet, try again in half a second
+                setTimeout(() => {
+                    this.value = value;
+                }, 500);
+            }
+        }
+```
+

demo/.angular-cli.json

@@ -8,8 +8,21 @@
       "root": "src",
       "outDir": "dist",
       "assets": [
-        "assets",
-        "favicon.ico"
+        {
+          "glob": "**/*",
+          "input": "../node_modules/monaco-editor/min/",
+          "output": "./assets/monaco-editor/"
+        },
+        {
+          "glob": "**/*",
+          "input": "../node_modules/monaco-editor/min-maps/",
+          "output": "./assets/min-maps/"
+        },
+        {
+          "glob": "favicon.ico",
+          "input": "./",
+          "output": "./"
+        }
       ],
       "index": "index.html",
       "main": "main.ts",
@@ -57,4 +70,4 @@
     "styleExt": "css",
     "component": {}
   }
-}
+}

demo/package.json

@@ -12,6 +12,7 @@
   },
   "private": true,
   "dependencies": {
+    "@abc.xyz/angular-monaco-editor-loader": "0.0.3",
     "@angular/animations": "^4.0.0",
     "@angular/common": "^4.0.0",
     "@angular/compiler": "^4.0.0",

demo/src/app/app.component.html

@@ -1,7 +1,7 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{title}}!
-  </h1>
 
-</div>
+<h1>
+  Welcome to {{title}}!
+</h1>
+
+<monaco-editor *loadMonacoEditor></monaco-editor>

demo/src/app/app.component.ts

@@ -1,10 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { MonacoEditorLoaderService } from '@abc.xyz/angular-monaco-editor-loader';
 
+declare const monaco: any;
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'xyz.MonacoEditorLoader';
+
+  ngOnInit() {
+  }
 }
+

demo/src/app/app.module.ts

@@ -1,16 +1,19 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { MonacoEditorLoaderModule, MonacoEditorLoaderService } from '@abc.xyz/angular-monaco-editor-loader';
 
 import { AppComponent } from './app.component';
+import { MonacoEditorComponent } from './monaco-editor/monaco-editor.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MonacoEditorComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    MonacoEditorLoaderModule
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

demo/src/app/monaco-editor/monaco-editor.component.css

@@ -0,0 +1,7 @@
+#container {
+    position: absolute;
+    top:20;
+    left:0;
+    width:100%;
+    height:99%;
+}

demo/src/app/monaco-editor/monaco-editor.component.html

@@ -0,0 +1,2 @@
+<div id="container">
+</div>

demo/src/app/monaco-editor/monaco-editor.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MonacoEditorComponent } from './monaco-editor.component';
+
+describe('MonacoEditorComponent', () => {
+  let component: MonacoEditorComponent;
+  let fixture: ComponentFixture<MonacoEditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MonacoEditorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MonacoEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

demo/src/app/monaco-editor/monaco-editor.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'monaco-editor',
+  templateUrl: './monaco-editor.component.html',
+  styleUrls: ['./monaco-editor.component.css']
+})
+export class MonacoEditorComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: true,
+      noSyntaxValidation: false
+    });
+
+    // compiler options
+    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.ES2016,
+      allowNonTsExtensions: true
+    });
+
+    // extra libraries
+    monaco.languages.typescript.javascriptDefaults.addExtraLib([
+      'declare class Facts {',
+      '    /**',
+      '     * Returns the next fact',
+      '     */',
+      '    static next():string',
+      '}',
+    ].join('\n'), 'filename/facts.d.ts');
+
+    var jsCode = [
+      '"use strict";',
+      '',
+      "class Chuck {",
+      "    greet() {",
+      "        return Facts.next();",
+      "    }",
+      "}"
+    ].join('\n');
+
+    monaco.editor.create(document.getElementById("container"), {
+      value: jsCode,
+      language: "javascript"
+    });
+  }
+
+}